Complex Lottie Animations From After Effects Always Failed Until I Tried This

Most effects within after effects are not compatible when exporting a Lottie animation, things just break and simply don’t work. However using PNG sequences we can get any animation using any effect to work perfectly with Lottie, every single time.
Let's dive in.
👇 Subscribe for the latest MUX👇
KZbin: ‪@MotionUX‬

[@jz1244]

Another awesome tutorial! thanks! question...why do you use the bodymovin vs lottie plugin? thanks again!

[@MotionUX]

Great question. The last time I checked the output was identical if not very close. I may take a gander at it soon and see if it’s worth its own video!

[@MotionUX]

Just posted this answer to your question! kzbin.info/www/bejne/o16Wqp1pq9uffa8si=T9lBoRa6AU2LS1lh

[@gossip_aunty]

Awesome, thanks for this tutorial

[@captainess]

goddd you're a lifesaver, thanks a ton

[@MotionUX]

Appreciate it, glad it helped!

[@david_jay992]

I had to work on a very complex flag animation for my product some 2 years ago and it wasn't working. I made it into a GIF and split everything frame by frame, exported the PNG and stringed it together in AE. 😂 The file was super heavy but our mobile guy was able to make it work. This is a much more efficient method!

[@MotionUX]

Amazing. We’ve all had these moments haha happy to share a more efficient workflow!

[@lucylewis6985]

Are you able to use this technique for a Lottie file on Webflow? We are having trouble linking the images and it's driving me bananas lol

[@MotionUX]

Absolutely, Wherever a Lottie is able to be played this technique will work!

[@christrim320]

I always seem to have an issue with colours remaining the same after export. Just tends to revert back to the original colour, and tips for said?

[@christrim320]

this isnt using a png sequence tho.

[@MotionUX]

Check out this video where I dive into it! After Effects Gradient Lottie Animation Exports without errors kzbin.info/www/bejne/iXq9cmSQi5aCn7M TLDR save before export.

[@Marie-pg8li]

Thank you so so much!

[@MotionUX]

Absolutely!

[@katume7156]

Hmm interesting, I think I have 2 options to get scalable animations with Figma files 1. Importing the figma files into Adobe Illustrator, converting the ai file in ae to shape layers and render with bodymovin 2. Export figma file as .svg and import it in lottiecreator browser, making the animation there but with many limitations and some extra costs Both have their advantages and disadvantages. Advantages for the first one are I can possibly use more effects and do some more complex animations but with the disadvantage that it won't handle gradients and blurs. Advantages for the second are I can handle the gradients and blurs but I can't animate everything as detailed as in AE Sadly that AE doesn't support svg files yet 😭 it could be way better lmao

[@katume7156]

Actually I have a 3rd idea, I can export a svg file and put the animated layer that has no gradients over the svg file So then this could work in some cases

[@MotionUX]

You can acutally just export lottie SVG animations from AE, Firstly Importing from Figma > AE using AEUX plugin. This works great for 99% of things, however there are many effects and visuals that are not compatible with SVGs / Lottie which is what the focus of this video is for. Agreed its always better working with SVGs to keep things scalable but sometimes in the product design process you need to get hacky to ship things.

[@Sacamacuca]

Great content as usual!

[@MotionUX]

Appreciate it 🎉🎉

[@andyrenton1962]

IMG sequences aren't rendering.. how did you do it?

[@MotionUX]

In the video at about 2:05 I explain my process of how I export the png sequence.

[@nartz5361]

why i cant see my png sequence on the json?

[@MotionUX]

Tell me more about what you mean? In the code? During html preview? On device?

[@nartz5361]

@@MotionUX i mean the output of the json files just nothing, I cant see any keyframes and any visual from my png sequence. the size only 1 kb too. doesn't make any sense

[@MotionUX]

@@nartz5361 hmm… sounds like it’s not actually converting your animations. Make sure the render in/out is covering your project, Or Try a fresh project. Make sure your render settings in body moving are also the same as what’s shown in the tutorial.