How to Lottie Animation SVG

29 views Asked by At

I'm new to lottie files, I've created animations in after effects for video, and I think thats the method I'll be using, from illustrator to After effects, or figma to after effects.

What I'm trying to achieve is quite complex of an animation, and I thought all lottie animations were a file that ended with .lottie , but now I'm finding out that a lot of the ones I'm using for inspiration, are svgs with animated elements in them.

My inspiration animations: The first hero visuals: https://lottiefiles.com/platform https://www.apollo.io/ https://stripe.com/en-ca/billing

Are these lottie animations? If yes, what type? How? How do I create an animation like this? If you have links towards something that would point me in the right direction, I would be very grateful!

Thank you!

I've tried to use lottie, but everytime I try and make an animation, it just gives me a .json file or a .lottie file. I have not been able to get the animation to export as html or as SVG animation like my inspiration animations.

1

There are 1 answers

2
sam-osb On

Once you pass your .json or .lottie (preferably .lottie for a smaller file size) to a Lottie / dotLottie player they'll render on page as SVGs.

Basically you pass your animation file to a player, the player can render it as an animated SVG in the DOM.