airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.54k stars 2.87k forks source link

Export Not Working with Set Matte... No Movement in Animation #2007

Open thielsteven opened 4 years ago

thielsteven commented 4 years ago

My issue is that when I export my .json file and upload it to Lottie Files, my circle shows up but there is not movement/animation... The colors are also exported incorrectly although this isn't my main issue. I will attach my project file..

Environment:

I created a grey circle and used Set Matte to apply this mask to all of the other waves/shapes in the composition. If you look in the file you will see why I'm doing so, I'm basically trying to use this as a cookie cutter so that the edges of this "circle" are defined while the "insides" of the circle are waving around. I used the Wave Warp effect and even if you pin the edges it does not leave that edge un-affected by the Wave Warp so I had to do a mask to get the look that I wanted.

Here's a link to my After Effects project file https://github.com/thielsteven/ae

Screen Shot 2020-02-22 at 12 04 36 AM Screen Shot 2020-02-22 at 12 04 45 AM
Danjuanlab commented 4 years ago

Unfortunately, except for Gaussian blur, other built-in effects you use are not supported by lottie.

jerfeson commented 4 years ago

Unfortunately, except for Gaussian blur, other built-in effects you use are not supported by lottie.

It works, but not so well.

jerfeson commented 4 years ago

My issue is that when I export my .json file and upload it to Lottie Files, my circle shows up but there is not movement/animation... The colors are also exported incorrectly although this isn't my main issue. I will attach my project file..

Environment:

* Google Chrome Version 80.0.3987.116

* After Effects Version 17.0.2

I created a grey circle and used Set Matte to apply this mask to all of the other waves/shapes in the composition. If you look in the file you will see why I'm doing so, I'm basically trying to use this as a cookie cutter so that the edges of this "circle" are defined while the "insides" of the circle are waving around. I used the Wave Warp effect and even if you pin the edges it does not leave that edge un-affected by the Wave Warp so I had to do a mask to get the look that I wanted.

Here's a link to my After Effects project file https://github.com/thielsteven/ae

Screen Shot 2020-02-22 at 12 04 36 AM Screen Shot 2020-02-22 at 12 04 45 AM

Lottie solves 95% of the problems, the rest just the good old gif solves lol, I recommend using GifGun, it worked well for me