What is Lottie and how to get started
Lottie is a library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images in iOS, Android, Windows, React Native and more.
Before you jump into Animating lets learn how to quickly import your illustrations to After Effects.
Importing illustrations from Sketch to After Effects
If you've played around with After Effects you will realize illustrating in AE is a pain in 🍑. Is Sketch your tool when it comes to illustration? Worry no more. The amazing folks at Google motion UX team has an amazing plugin that transfers sketch layers into After Effects. Cool huh.
Installing The AEUX Plug-in in Sketch
- Dowload AEUX plug-in.
- Double click in Sketch2AE.sketchplugin.
- Sketch will open and confirm the plug-in is installed.
- Inside de Plug-ins tab you'll find the Sketch2AE and its submenus.
Installing The AEUX Plug-in in After Effects
- Close After Effects.
- Drag Sketch2AE.jsx into Applications > Adobe After Effects [version number] > Scripts > ScriptUI Panels.
- Open After Effects.
- In the Window section from the top menu you'll fund the plug-in in AEUX.
- If you have any trouble installing it, you can do it manually:
- Close AE and AI. Change the AEUX.zxp extension to a zip archive and unzip it .
- Access the Adobe extensions folder: / Users / username / Library /Application Support / Adobe/ CEP/ extensions /
- Copy the AEUX folder in /extensions/ folder
- Restart AE and look for the plug-in in Window>Extensions.
Once both Plug-ins are installed
- Open the plugin panel in Sketch from the top Plugin menu
- Select layers in Sketch
- Transfer shapes with either:
- Selection to Ae - layer data is transfered behind the scenes
- Export AEUX.json - layer data is saved as a file
- Images (if necessary) will be exported to disk in a location you specify
- A notice will pop up when the export is finished
- Switch to After Effects
Open the AEUX panel in After Effects (from the top menu Window>Extensions).
Click to build Layer data from Sketch is now transferred between apps behind the scenes. Once layers are available for building in Ae, you will be notified in the panel with a blue badge and a layer count. Gone are the days of pasting a bunch of code. Just be sure the panel is open in Ae.
Drag and drop It is possible to export layer data as a standalone .json file. Importing this file is done by clicking Import 📎, or by dropping the file on the AEUX panel.
Importing illustrations from Illustrator to After Effects for Animation
- Open up your illustration and open up the Layers Panel. (If it’s not already on your sidebar, go to Window > Layers)
- Select the layer with your illustration. Next, click the icon at the top-right of the panel and select the Release to Layers (Sequence) option.
- Go through the layers and name them properly, So when you import to AE you will keep your sanity
- Open After Effects and go to File > Import > File. Select your Illustrator file and, at the bottom, where it says “Import As,” make sure to select Composition – Retain Layer Sizes.
- Now you are ready to animate
Installing Bodymovin plugin in After Effects
Get it from the adobe store. https://creative.adobe.com/addons/products/12557
- Download the ZIP from the Lottie Web Github repo. https://github.com/airbnb/lottie-web
- Extract content and get the .zxp file from '/build/extension'
- Use the ZXP installer from aescripts.com.
Quick Tips to Animate in After Effects
Here are some tips we've gathered over the years:
- If you don't use AEUX and want to export archives from AI, transform them to vector layers in After Effects.
- Transform typographies into vector layers and delete groups and compound strokes. (How to convert to vector layer? Right click on the layer> "create shapes from the vector layer" and you're all set.)
- It's important to convert all elements to vector layers before animating them and applying any effect or mode to them. Sometimes, when you convert them to vector layers, the attributes are lost and the nodes of the animations are turned off. You should always check that no element contains compound strokes or groups. This usually happens when the elements were built based on clipping masks or compound strokes, tidying this up is what uses up more time while making an animation. Use Sketch2After if you are willing to optimize this process.
- Opacity changes are advisable.
- Gradients too! They work! The trick is to save the project before rendering with BodyMovin.
- Don't use masks. BodyMoving simply does not recognize them.
- Don't include bitmap images such as jpg or png.
Naming the Assets
The result Lottie throws is a *.json archive that must maintain the same naming structure and parameters than the rest of the assets. Some recommendations:
- Keep the name in lowercase. Ex: app_icon
- Name the assets in English.
- Maintain the asset names if the functionality hasn't change. Be consistent.
After Effects features supported in Lottie.
Rendering your Lottie Animation.
Once you are done animating
- Open Bodymovin plugin (Window > Extension > Bodymovin)
- Select the Compositions you want to render and Click the three dots in the Destination column.
- Click Render and Bodymovin will export a .json file.
Test you Animation in Lottie Web, iOS & Android.
- Drag and drop the exported .json file to https://lottiefiles.com/preview
- To test the animation in iOS and Android:
Once you are happy with the Animation just share the LottieFiles private animation URL with your engineers/stakeholders ✌️