Chapter 892: <Lottie>

Core Idea

_Part of the @remotion/lottie package.

Key Concepts

• Example
• Props
• animationData
• className
• direction
• loop
• playbackRate
• style

Code Examples

{"v":"5.7.13","fr":60,"ip":0,"op":190,"w":1400,"h":1400,"nm":"Halloween4","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"syes2 Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":81,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":126,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":180,"s":[100]},{"t":189,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[700,700,0],"ix":2,"l":2},"a":{"a":0,"k":[700,700,0],"ix":1,"l":2},"s":{"a":0,"k":[81,81,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[23.598,4.338],[-16.144,12.513],[-14.406,-3.486],[-5.783,-9.989],[5.551,-10.333],[13.41,0.622]],"o":[[13.06,-15.846],[12.84,-9.954],[11.369,2.748],[5.304,9.168],[-6.815,12.675],[-27.865,-1.285]],"v":[[-60.747,25.943],[-16.719,-16.816],[26.301,-32.49],[50.867,-9.75],[55.196,21.422],[18.174,35.354]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.075,0.035000000748,0.071000005685,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[1016.351,648.256],"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":
// ...(truncated)

• What it demonstrates: Usage pattern for <Lottie> from the official docs.

Key Takeaways

1. Understand example when working with <Lottie>.
2. Understand props when working with <Lottie>.
3. Understand animationdata when working with <Lottie>.
4. Understand classname when working with <Lottie>.
5. Understand direction when working with <Lottie>.

Connects To

• Getlottiemetadata: related page in the Lottie (@remotion/lottie) section.
• Lottiefiles: related page in the Lottie (@remotion/lottie) section.
• Remote: related page in the Lottie (@remotion/lottie) section.