Designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. Lottie is a library created by Airbnb. Documentation on Lottie specific details can be found here.
Outlined below is the basic workflow of creating Lottie animations:
- Create an animation in Adobe After Effects.
- Export the animation using Adobe After Effects extension Bodymovin.
- Bodymovin will place a file onto your computer, containing your animation in a .json file.
- Simply place the .json file into the Lottie Widget in your Vev project.
The widget has the following fields:
|Field Name||Field Type||Notes|
|Lottie json file||File Upload||
The json file containing a lottie animation.
|Play animation trigger||Dropdown||
Specify when the animation should start playing on your webpage.
Specify if the animation should play online once (toggle off) or play over and over again (toggle on).
|Preserve aspect ratio||Togglefield||
Toggle on to avoid stretching the appearance of the animation. Toggle off to have complete control of the animation's length and width.
LottieFiles is an excellent source for free, and paid, downloadable Lottie animation json files provided by a friendly community of designers.
Save work effort when possible, and always remember to give back where you can!