I have a question regarding my json export for Android. I used After Effects when creating the animation.
I have three layers in After effects (see pictures):
The background layer, which is a composition. This composition consists of illustrator layers which were all changed to outlines with “create shapes from vector layer”
The purple box, which was an imported illustrator file which I changed to outlines using “create shapes from vector layer”
The “reader” that moves across the screen. Also a composition.
This is animated in such a way that the background moves from left to right (seems as if the box moves), then the reader moves across the screen and then everything fades to 0% opacity and then the animation starts over again.
In After Effects, everything works fine. The background layers fades as a whole and nothing strange seems to happen.
However. When I export this animation using LottieFiles and the json file is used in Android, the opacity suddenly starts doing very strange things. Instead of the background composition fading out as a whole, every single element fades out individually, which gives a very ugly effect. Also, the text layers do not seem to fade out at all, they just stay on the screen (text is different in screenshots because we work with yaml placeholders).
The exact same json file works perfectly fine on iOS.
Concerning export settings: the developers asked to untick basically every box. So no boxes are ticked.
I am still very much learning After Effects and LottieFiles so I don’t really know how to fix this.
Does anyone know why this works on iOS but does not work on Android? Any tips would be very welcome
So I think the first problem might be the use of the COMPS. Is the opacity change applied to the COMP? That could honestly be the biggest problem since it’s hierarchal. I wonder if you were to place all of the background elements into one grouped layer (not comp) and then apply the opacity change that way it might help.
Thank you so much for your reply! I’ve looked into this but I don’t fully understand. When I google how to group layers in After Effects, the only results I get tell me that I cannot group layers in After Effects. The only way to “do” that is by precomposing, which makes me end up with a composition again.
Your reasoning sounds very logical and you are likely correct about the hierarchy problem but I don’t really understand how I should group the layers together?
So my method is to use the layers and the subsequent “group” inside of it to organize. In this quick example I made 2 squares and 2 circles. Then I group them inside the layer with Command+G to organize them. This lets me have a lot of layers/shapes/etc. all within one main comp without using the PreComp options that can fail. So in your case when you bring the AI file for the background I would convert to shape, but not have everything as a separate layers but all as one. This should let you reduce the opacity as a whole without them being individually changing.
This is from where I animated a character and I rigged them based on arms, shirt, etc.
Thank you so much for the effort that you put into this! I’ve tried it yesterday and I was really hopeful but unfortunately Android still gives the same results
The Lottie file itself seems fine when we view it in previews, the background fades out as a whole, so it must be an Android-problem. We’ve decided to just leave it as is for now, because we cannot think of any other solutions
Again, thank you so much for helping out and making all the screenshots for explanation!
