How to Use and Control Lottie Animations in Jetpack Compose

byBolt UIX • • 2 min read
0

Add Dynamic Animations with Lottie in Jetpack Compose

Want to make your app pop with engaging animations? Lottie in Jetpack Compose is your go-to! 

It lets you add smooth, customizable animations-like loading spinners or success/failure icons-with minimal code. 

Using Airbnb’s Lottie library, you can control playback, speed, scale, rotation, and more. Let’s dive into fun examples to bring your UI to life!

Lottie Animation: Loading, Success, Failure

Setting Up Lottie in Your Project

To get started, add the Lottie Compose library and place your animation file in the right spot.

  • Add Dependency: In your app/build.gradle, include: 
    
implementation("com.airbnb.android:lottie-compose:6.6.7")
    Sync your project in Android Studio.
  • Add Animation File: Place anim_loading_success_failed.json in the res/raw folder.
  • Find Animations: Download free Lottie files from LottieFiles.

Quick Peek: 

We’ll use a Lottie animation with loading, success, and failure states as our playground. 

Each example shows a different control trick-play/pause, speed, scale, rotation, and opacity-with ready-to-copy code. We’ll explain how it works and where to use it. Let’s get started!

1. Play Full Animation: Smooth Looping

This runs the full animation in a loop, perfect for loading screens or continuous effects.

@Composable
fun LottieSimpleDemoScreen() {
    var lottieState by remember { mutableStateOf(LottieState(isPlaying = true)) }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = LottieConstants.IterateForever,
        isPlaying = lottieState.isPlaying
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(320.dp).padding(16.dp)
    )
}

Why Try It: Uses LottieConstants.IterateForever for seamless looping. Ideal for loading indicators or background flair.

2. Success/Failure States: Targeted Clips

Show specific parts of the animation for success (check) or failure (cross) states, stopping after one play.

@Composable
fun LottieSimpleDemoScreen() {
    var lottieState by remember { mutableStateOf(LottieState(isSuccess = true)) }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = 1,
        isPlaying = lottieState.isPlaying,
        clipSpec = LottieClipSpec.Progress(
            min = if (lottieState.isFailed) 0.499f else 0.0f,
            max = if (lottieState.isSuccess) 0.44f else 0.95f
        )
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(320.dp).padding(16.dp)
    )
}

Why Try It: LottieClipSpec.Progress targets specific animation segments. Great for form submissions or task feedback.

3. Speed Control: Fast or Slow

Adjust the animation speed to make it zippy or relaxed, keeping users engaged.

@Composable
fun LottieSimpleDemoScreen() {
    var lottieState by remember { mutableStateOf(LottieState(speed = 1.5f)) }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        isPlaying = lottieState.isPlaying,
        speed = lottieState.speed
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(320.dp).padding(16.dp)
    )
}

Why Try It: Tweak speed for dynamic pacing. Use for interactive elements like games or progress bars.

4. Scale and Rotate: Add Some Flair

Make the animation grow, shrink, or spin with smooth transitions for extra wow.

@Composable
fun LottieSimpleDemoScreen() {
    var lottieState by remember { mutableStateOf(LottieState(scale = 1.5f, rotation = 360f)) }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))
    val progress by animateLottieCompositionAsState(composition = composition)
    val scaleAnimation by animateFloatAsState(
        targetValue = lottieState.scale,
        animationSpec = tween(durationMillis = 500, easing = LinearEasing)
    )
    val rotationAnimation by animateFloatAsState(
        targetValue = lottieState.rotation,
        animationSpec = spring(dampingRatio = Spring.DampingRatioLowBouncy)
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier
            .size(320.dp)
            .padding(16.dp)
            .graphicsLayer(
                scaleX = scaleAnimation,
                scaleY = scaleAnimation,
                rotationZ = rotationAnimation,
                transformOrigin = TransformOrigin.Center
            )
    )
}

Why Try It: graphicsLayer with animations adds flair. Perfect for onboarding screens or highlights.

5. Opacity: Subtle Fades

Adjust the animation’s opacity for a soft, elegant look.


@Composable
fun LottieSimpleDemoScreen() {
    var lottieState by remember { mutableStateOf(LottieState(opacity = 0.5f)) }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))
    val progress by animateLottieCompositionAsState(composition = composition)
    val dynamicProperties = rememberLottieDynamicProperties(
        rememberLottieDynamicProperty(
            property = LottieProperty.OPACITY,
            value = (lottieState.opacity * 100).toInt(),
            keyPath = arrayOf("**")
        )
    )
    LottieAnimation(
        composition = composition,
        progress = { progress },
        modifier = Modifier.size(320.dp).padding(16.dp),
        dynamicProperties = dynamicProperties
    )
}

Why Try It: LottieProperty.OPACITY creates subtle effects. Use for background animations or hints.

Which One’s Best? A Quick Comparison

Here’s how these techniques stack up-by impact, ease, and use case.

# Effect Pros Cons
1 Success/Failure States Clear feedback; highly reusable Needs clip timing setup
2 Scale and Rotate Eye-catching; smooth transitions More code for animations
3 Play Full Animation Simple setup; great for loops Less dynamic
4 Speed Control Flexible pacing; user-friendly May need fine-tuning
5 Opacity Subtle and elegant Less impactful alone

Tips to Get Started Right

  • Choose Lottie Files Wisely: Use animations from LottieFiles with clear segments for states like success/failure.
  • Smooth Transitions: Use tween or spring for scale/rotation animations.
  • Test Performance: Run on real devices to ensure smooth playback.
  • Dynamic Properties: Adjust LottieProperty for stroke width or opacity to match your theme.
  • Keep It Simple: Start with one animation and expand as needed.

Common Questions Answered

What’s the Easiest Way to Start?

Add LottieAnimation with a raw resource and set iterations = LottieConstants.IterateForever.

How Do I Avoid Choppy Animations?

Use animateFloatAsState with tween or spring for smooth transitions.

Where to Find Lottie Animations?

Explore LottieFiles for free, high-quality animations ready for Compose.

Can I Use Lottie on Buttons?

Yes! Place LottieAnimation inside a Button composable for interactive effects.

Screenshots

Lottie Success Animation Lottie Failure Animation

Full Code to Copy and Run

Here’s the complete demo code. Paste it into your project and watch the magic!


package com.android.uix

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.ArrowForward
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Close
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material.icons.filled.Refresh
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.airbnb.lottie.LottieProperty
import com.airbnb.lottie.compose.*
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.tooling.preview.Preview
import kotlin.math.max
import kotlin.math.min

class MainActivityLottie : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LottieSimpleDemoScreen()
        }
    }
}

data class LottieState(
    val isPlaying: Boolean = true,
    val speed: Float = 1f,
    val isSuccess: Boolean = false,
    val isFailed: Boolean = false,
    val scale: Float = 1f,
    val rotation: Float = 0f,
    val opacity: Float = 1f
)

@Composable
fun LottieSimpleDemoScreen() {
    var lottieState by remember { mutableStateOf(LottieState()) }
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.anim_loading_success_failed))
    val progress by animateLottieCompositionAsState(
        composition = composition,
        iterations = if (lottieState.isSuccess || lottieState.isFailed) 1 else LottieConstants.IterateForever,
        isPlaying = lottieState.isPlaying,
        speed = lottieState.speed,
        clipSpec = LottieClipSpec.Progress(
            min = if (lottieState.isFailed) 0.499f else 0.0f,
            max = when {
                lottieState.isSuccess -> 0.44f
                lottieState.isFailed -> 0.95f
                else -> 0.282f
            }
        )
    )
    val dynamicProperties = rememberLottieDynamicProperties(
        rememberLottieDynamicProperty(
            property = LottieProperty.STROKE_WIDTH,
            value = if (lottieState.isSuccess) 5f else 2f,
            keyPath = arrayOf("**")
        ),
        rememberLottieDynamicProperty(
            property = LottieProperty.OPACITY,
            value = (lottieState.opacity * 100).toInt(),
            keyPath = arrayOf("**")
        )
    )
    val scaleAnimation by animateFloatAsState(
        targetValue = lottieState.scale,
        animationSpec = tween(durationMillis = 500, easing = LinearEasing)
    )
    val rotationAnimation by animateFloatAsState(
        targetValue = lottieState.rotation,
        animationSpec = spring(dampingRatio = Spring.DampingRatioLowBouncy)
    )
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Lottie Demo",
            style = TextStyle(fontSize = 28.sp, fontWeight = FontWeight.Bold, color = Color.Black),
            modifier = Modifier.padding(top = 24.dp, bottom = 16.dp)
        )
        LottieAnimation(
            composition = composition,
            progress = { progress },
            modifier = Modifier
                .size(320.dp)
                .padding(16.dp)
                .graphicsLayer(
                    scaleX = scaleAnimation,
                    scaleY = scaleAnimation,
                    rotationZ = rotationAnimation,
                    transformOrigin = TransformOrigin.Center
                ),
            dynamicProperties = dynamicProperties
        )
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            SimpleButton("Play Full", Icons.Default.PlayArrow) {
                lottieState = lottieState.copy(
                    isPlaying = true,
                    isSuccess = false,
                    isFailed = false,
                    speed = 1f,
                    scale = 1f,
                    rotation = 0f,
                    opacity = 1f
                )
            }
            SimpleButton("Success", Icons.Default.Check) {
                lottieState = lottieState.copy(
                    isPlaying = true,
                    isSuccess = true,
                    isFailed = false,
                    speed = 1f,
                    scale = 1f,
                    rotation = 0f,
                    opacity = 1f
                )
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            SimpleButton("Failure", Icons.Default.Close) {
                lottieState = lottieState.copy(
                    isPlaying = true,
                    isSuccess = false,
                    isFailed = true,
                    speed = 1f,
                    scale = 1f,
                    rotation = 0f,
                    opacity = 1f
                )
            }
            SimpleButton("Play/Pause", Icons.Default.PlayArrow) {
                lottieState = lottieState.copy(
                    isPlaying = !lottieState.isPlaying
                )
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            SimpleButton("Speed Up", Icons.Default.ArrowForward) {
                lottieState = lottieState.copy(
                    speed = 1.5f,
                    isPlaying = true
                )
            }
            SimpleButton("Speed Down", Icons.Default.ArrowBack) {
                lottieState = lottieState.copy(
                    speed = 0.5f,
                    isPlaying = true
                )
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            SimpleButton("Scale", Icons.Default.Add) {
                lottieState = lottieState.copy(
                    scale = if (lottieState.scale == 1f) 1.5f else 1f,
                    isPlaying = true
                )
            }
            SimpleButton("Rotate", Icons.Default.Refresh) {
                lottieState = lottieState.copy(
                    rotation = if (lottieState.rotation == 0f) 360f else 0f,
                    isPlaying = true
                )
            }
        }
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            SimpleButton("Opacity", Icons.Default.Edit) {
                lottieState = lottieState.copy(
                    opacity = if (lottieState.opacity == 1f) 0.5f else 1f,
                    isPlaying = true
                )
            }
            SimpleButton("Reset", Icons.Default.Refresh) {
                lottieState = LottieState()
            }
        }
    }
}

@Composable
fun SimpleButton(text: String, icon: androidx.compose.ui.graphics.vector.ImageVector, onClick: () -> Unit) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val scale by animateFloatAsState(
        targetValue = if (isPressed) 0.95f else 1f,
        animationSpec = spring(dampingRatio = Spring.DampingRatioMediumBouncy)
    )
    Button(
        onClick = onClick,
        modifier = Modifier
            .graphicsLayer(scaleX = scale, scaleY = scale)
            .padding(horizontal = 8.dp, vertical = 8.dp)
            .size(width = 140.dp, height = 48.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFF007BFF),
            contentColor = Color.White
        ),
        shape = RoundedCornerShape(25.dp),
        interactionSource = interactionSource,
        contentPadding = PaddingValues(horizontal = 12.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            Icon(
                imageVector = icon,
                contentDescription = null,
                modifier = Modifier.size(20.dp)
            )
            Text(text = text, fontSize = 14.sp)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun LottieSimpleDemoScreenPreview() {
    LottieSimpleDemoScreen()
}

Lottie Animation File

Use the bundled JSON file: res/raw/anim_loading_success_failed.json. Download it from here and place it in your project’s res/raw folder.


{"v":"4.10.1","fr":60,"ip":0,"op":841,"w":81,"h":81,"nm":"icn-loader-and-success","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"x-parent","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":80,"s":[40.5,40.5,0],"e":[38.75,40.5,0],"to":[-0.29166665673256,0,0],"ti":[-0.29166665673256,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":105,"s":[38.75,40.5,0],"e":[42.25,40.5,0],"to":[0.29166665673256,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":115,"s":[42.25,40.5,0],"e":[38.75,40.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":125,"s":[38.75,40.5,0],"e":[42.25,40.5,0],"to":[0,0,0],"ti":[-0.125,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":135,"s":[42.25,40.5,0],"e":[39.5,40.5,0],"to":[0.125,0,0],"ti":[0.125,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":145,"s":[39.5,40.5,0],"e":[41.5,40.5,0],"to":[-0.125,0,0],"ti":[-0.16666667163372,0,0]},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"n":"0p833_1_0p167_0","t":155,"s":[41.5,40.5,0],"e":[40.5,40.5,0],"to":[0.16666667163372,0,0],"ti":[0.16666667163372,0,0]},{"t":162.5}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"dash-3","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[9.146,0,0],"ix":2},"a":{"a":0,"k":[11.358,11.258,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[10.357,-10.258],[-10.357,10.258]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0.8,0.8,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[11.358,11.258],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.302],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p302_1_0p333_0"],"t":105,"s":[100],"e":[0]},{"t":130}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":105,"s":[100],"e":[0]},{"t":130}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"dash-1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-2.517,7.282,0],"ix":2},"a":{"a":0,"k":[13.774,13.874,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[12.775,12.874],[-12.775,-12.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0.8,0.8,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[13.774,13.874],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.302],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p302_1_0p333_0"],"t":80,"s":[100],"e":[0]},{"t":105}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":80,"s":[100],"e":[0]},{"t":105}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"cross-1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"a":0,"k":[13.5,13.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[12,12],[-12,-12]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.81568627451,0.007843137255,0.105882352941,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[13.5,13.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":100,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.341],"y":[1]},"o":{"x":[0.371],"y":[0]},"n":["0p341_1_0p371_0"],"t":72.5,"s":[100],"e":[0]},{"t":132.5}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"cross-2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2},"a":{"a":0,"k":[13.5,13.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[12,-12],[-12,12]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.81568627451,0.007843137255,0.105882352941,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[13.5,13.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":100,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.341],"y":[1]},"o":{"x":[0.371],"y":[0]},"n":["0p341_1_0p371_0"],"t":87.5,"s":[100],"e":[0]},{"t":147.5}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"circle-red","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":47.5,"s":[0],"e":[100]},{"t":80}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"t":120}],"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[37.5,37.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-19.054,0],[0,-19.054],[19.054,0],[0,19.054]],"o":[[19.054,0],[0,19.054],[-19.054,0],[0,-19.054]],"v":[[0,-34.5],[34.5,0],[0,34.5],[-34.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.815686285496,0.007843137719,0.105882354081,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[37.5,37.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.123],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p123_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"circle-blue","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":47.5,"s":[100],"e":[0]},{"t":80}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"t":120}],"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[37.5,37.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-19.054,0],[0,-19.054],[19.054,0],[0,19.054]],"o":[[19.054,0],[0,19.054],[-19.054,0],[0,-19.054]],"v":[[0,-34.5],[34.5,0],[0,34.5],[-34.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.187999993563,0.615999996662,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[37.5,37.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.123],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p123_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"circle-blue","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"t":120}],"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[37.5,37.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-19.054,0],[0,-19.054],[19.054,0],[0,19.054]],"o":[[19.054,0],[0,19.054],[-19.054,0],[0,-19.054]],"v":[[0,-34.5],[34.5,0],[0,34.5],[-34.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.187999994615,0.616000007181,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[37.5,37.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.123],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p123_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.262],"y":[1]},"o":{"x":[0.581],"y":[0]},"n":["0p262_1_0p581_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"circle-red","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"t":120}],"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[37.5,37.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-19.054,0],[0,-19.054],[19.054,0],[0,19.054]],"o":[[19.054,0],[0,19.054],[-19.054,0],[0,-19.054]],"v":[[0,-34.5],[34.5,0],[0,34.5],[-34.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.313725490196,0.827450980392,0.576470588235,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[37.5,37.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.317],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p317_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.456],"y":[1]},"o":{"x":[0.581],"y":[0]},"n":["0p456_1_0p581_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0}]},{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"tick-parent","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.576,0.576,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p576_1_0p333_0","0p576_1_0p333_0","0p667_1_0p333_0"],"t":87.5,"s":[90,90,100],"e":[108,108,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.423,0.423,0.333],"y":[0,0,0]},"n":["0p667_1_0p423_0","0p667_1_0p423_0","0p667_1_0p333_0"],"t":130,"s":[108,108,100],"e":[100,100,100]},{"t":147.5}],"ix":6}},"ao":0,"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"dash-1","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-11.053,15.359,0],"ix":2},"a":{"a":0,"k":[4.302,4.302,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[3.303,3.302],[-3.303,-3.302]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0.8,0.8,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[4.302,4.302],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.302],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p302_1_0p333_0"],"t":87.5,"s":[100],"e":[0]},{"t":115}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":87.5,"s":[100],"e":[0]},{"t":115}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"dash-2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[11.07,3.502,0],"ix":2},"a":{"a":0,"k":[11.358,11.257,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[10.357,-10.258],[-10.357,10.258]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.8,0.8,0.8,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[11.358,11.257],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.302],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p302_1_0p333_0"],"t":102.5,"s":[100],"e":[0]},{"t":125}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":102.5,"s":[100],"e":[0]},{"t":125}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"tick","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-0.333,1.799,0],"ix":2},"a":{"a":0,"k":[17.739,13.258,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[14.739,-10.258],[-5.976,10.258],[-14.739,1.494]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.187999994615,0.616000007181,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[17.739,13.258],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.185],"y":[1]},"o":{"x":[0.324],"y":[0]},"n":["0p185_1_0p324_0"],"t":87.5,"s":[100],"e":[0]},{"t":147.5}],"ix":1},"e":{"a":0,"k":100,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"circle-blue","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[360]},{"t":120}],"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[37.5,37.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-19.054,0],[0,-19.054],[19.054,0],[0,19.054]],"o":[[19.054,0],[0,19.054],[-19.054,0],[0,-19.054]],"v":[[0,-34.5],[34.5,0],[0,34.5],[-34.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.187999994615,0.616000007181,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[37.5,37.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.123],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p123_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":120}],"ix":1},"e":{"a":0,"k":0,"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":1800,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"icn-failed","refId":"comp_0","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.999],"y":[1]},"o":{"x":[0.42],"y":[0]},"n":["0p999_1_0p42_0"],"t":820,"s":[100],"e":[0]},{"t":839}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[40.5,40.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":81,"h":81,"ip":657,"op":847,"st":657,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"icn-loader","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[40.5,40.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":81,"h":81,"ip":537,"op":657,"st":537,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"icn-loader","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[40.5,40.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":81,"h":81,"ip":418,"op":538,"st":418,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"icn-success","refId":"comp_2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.999],"y":[1]},"o":{"x":[0.42],"y":[0]},"n":["0p999_1_0p42_0"],"t":397,"s":[100],"e":[0]},{"t":416}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[40.5,40.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":81,"h":81,"ip":238,"op":423,"st":238,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"icn-loader","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[40.5,40.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":81,"h":81,"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"icn-loader","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[40.5,40.5,0],"ix":2},"a":{"a":0,"k":[40.5,40.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":81,"h":81,"ip":119,"op":239,"st":119,"bm":0}]}

That’s it-now go make your apps pop with Lottie animations! #lottie

4.94 / 169 rates

Post a Comment

Previous Post Next Post