I have made an animation in after effects and rendered it out using the Lottie After Effects Plugin. The animation has now been implemented in and iOS app. The problem is that the animation doesn’t look the same when implemented as it does when previewing the JSON file. Specifically there are two issues:
The arm in the animation is glitching and blinks at one point in the animation.
The path that makes up the arm has a different timing when implemented in iOS, causing it to cut in to the hand and creating an edge. (The arm is animated using “trim path” in AfterEffect)
These issues don’t show when I look at the animation in AfterEffects or in the Lottiefiles preview on desktop or mobile. They only show when the animation is implemented in the app. Does anyone recognize these issues or know what could cause them?
Hello!
Yes, there are no errors or unsupported features in the animation.
I have made a thorough check both in features list and the after effects plugin before rendering the animation.
Hi @Torsten, can you turn off each layer one by one to see which layer is causing the problems? I don’t trust the list of supported features, just test the animation layer by layer, try to understand the root cause first, then find a workaround for it.
Hey @Torsten have you tried precomposing the original arm, removing the keyframes and using a matte instead of animating the trim path directly on the arm itself? That’s what I do with all my trim path animations and I haven’t had any glitching issues on iOS.
I find there can be issues with interpolation between keyframes on paths. When I have those issues, I just break down the animation to individual frames and it removes the need for interpolation.
Thank you for all the responses!
It seems that the trim path effect was the cause of the flicker glitch.
As suggested by @bart , I solved the issue by simply converting the interpolation between the keyframes in the trim path effect into individual keyframes. The file size increased a bit, but at least it works now!
Toggle on the expression for the trim path effect. Don’t change or enter any expression, just leave as it is. Select the keyframes for the trim path animation.
2. Go to Animation > Keyframe Assistant > Convert Expression to Keyframes.
Voila! This generates keyframes for the whole timeline, so delete the keyframes that are not needed and toggle of the expression.
This also solved the issue with the difference in timing of the trim path effect in after effects/preview vs how it looks when implemented in iOS. (The animation was implemented on Android and looked just the same as in after effects / lottiefiles preview - so this issue only shows on iOS…)
