Tricks and Tips to Work with Lottie

Lottie is wonderful. We all know that. But there are several tricks you need to know in order to make animations in an easier and faster way and also get them right in JSON.

#1 Sketch → After Effects

This is a double plug-in that lets us export our designs directly from Sketch and After Effects with every shape ready to animate with Lottie without needing to draw everything all over again.

Installing The Double Plug-in in Sketch

1. Double click in Sketch2AE.sketchplugin.
2. Sketch will open and confirm the plug-in is installed.
3. Inside de Plug-ins tab you’ll find the Sketch2AE and its submenus.

Installing The Double Plug-in in After Effects

1. Close After Effects.
2. Drag Sketch2AE.jsx into Applications > Adobe After Effects [version number] > Scripts > ScriptUI Panels.
3. Open After Effects.
4. In the Window section from the top menu you’ll fund the plug-in in AEUX.
5. 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.

Functioning

1. Select in Sketch which illustrations or elements of every screen you want to animate. Go to Plug-ins in the top menu: AEUX>Selection to AE.
2. Open After Effects, open the plug-in and click on Build comp.
3. The elements will copy automatically in shapes that are ready to animate.

#2 Install Body Moving in After Effects

Create and ship your animations by installing Lottie’s plug-in: Body Moving.

1. Download the plug-in from Github. It will be a *.zxp archive.
2. Close After Effects.
3. Use Zxp Installer to install it.
4. Open After Effects. You’ll find the plug-in here in Window> Extensions> BodyMoving.

#3 Quick Tips to Animate in After Effects

Here are some tips we’ve gathered over the years:

• If you don’t use Sketch2After Effects 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 BodyMoving.
• Don’t use masks. BodyMoving simply does not recognize them.
• Don’t include bitmap images such as jpg or png.

#4 Lottie Preview

Previewing the animation in the OS in which it is going to be applied is key. There might appear differences when each system renders and errors may show in one system but not in another so you may need to make some adjustments.

• Lottie Files web preview: https://lottiefiles.com/preview
• Lottie Files iOS preview: https://itunes.apple.com/us/app/lottie-preview/id1231821260?mt=8
• Lottie Files Android preview: https://play.google.com/store/apps/details?id=com.airbnb.lottie&hl=es_AR

We are looking to be up to date with the latest plug-ins and tools and keep our work flow optimized. Do you know any other type of Lottie or another tool that can be useful to us? Leave a comment! We’ll really appreciate it.

Major League is a staff augmentation agency by Lateral View.