When designing your website, you often are restricted with the amount of control you have when adding animations. Sometimes the simple fade, slide, or rotate won't cut it, maybe you want a little bit more. With the power of a Lottie, you can bring complex animations directly from After Effects and keyframe it to events on your website. Giving you complete control and creative freedom.
Before you Start
To create and export Lottie files you will need a few things:
1. Create your animation in After Effects
Start by creating your animation in After Effects. By default, Lottie files will end on the last frame and won't automatically loop. Make sure the last couple of frames are what your final image should look like.
Tips:
2. Export it as an Image Sequence
Once you have your animation made we need to export it as an image sequence.
Open Adobe Media Encoder and change the format to an image sequence of your choice.
In this example we used PNG Sequence with Alpha
Make sure to create a separate folder as your output destination. Since it's an image sequence, the output will be one picture per 0.01 of a frame.
3. Create a New Composition with your Image Sequence
Take the image sequence you just exported and import back it into After Effects.
Highlight all of your images and create a new composition.
Set the frame duration to 0.01.
00:01 represents 1/30th of a frame based on a 30fps composition.
Once you create the composition, your animation should play the same speed as when you created it.
4. Export as a Lottie JSON
Make sure you have the LottieFiles plugin installed.
Navigate to Windows -> Extension -> LottieFiles.
Find your composition and save it as a Lottie JSON.
Render times vary depending on your computer, but once its finished you will see it's saved as a JSON file.
5. Place on your website
Once you have your Lottie file exported, you can upload it to any website builder that supports the file. We've found that Webflow offers incredible support and flexibility for Lottie files. Check out our example site below to see it in action!
Meet the Author
mike schmitz
Mike Schmitz is the Videographer and Motion Graphics Artist at AmpliPhi Social Media Strategies. Whether it's a small production or a custom animated video, Mike can work with you in creating the perfect piece of content to drive marketing campaigns or develop your online presence.
Mike graduated from Madison Media Institute’s Video Production program and is an FAA Part-107 UAS certified drone pilot. Before joining AmpliPhi he was a part of UW Madison's Video Production Team, a Wedding Videographer, and a freelance drone pilot.