This is a weird one. I hope to at least get some direction on what could be done to optimize the playback performance.
I noticed that lottie-web plays animations much more smoothly, if the parts that are to be played have been rendered before. The most obvious example I can give is the difference I noticed in the rendering performance between the first and every following iteration of an animation being looped. I'm building an interactive scrollytelling experience for browsers, so the animations are fairly complex and surely need to be optimized (e.g. rasterizing unanimated layers, removing masks etc.).
However, what struck me was that even if the animations were janky during the first pass - especially when new scenes that have been hidden off-screen are being shown for the first time - the framerate became much higher whenever I played back a part of the animation that has been rendered before (I can navigate up and down through my animation).
I don't get this. At first I thought that maybe it has to do with the element's display value being set to block for the first time when they first become visible, but even after they are hidden and shown again: No more jank.
I should probably mention that I rasterized a lot of the more complex layers to improve the performance (with external assets) so I have a lot of layers that are pngs.
Is there any way I can prerender or set visible but opaque all layers before playing my animation? Is there anything I can do in my AE timeline to reduce this initial jankiness? I even thought about playing back the whole animation at high speed, but this seemed like a very silly workaround.
Tell us about your environment
Browser and Browser Version: Behaviour seen on Chrome, Safari and Firefox
After Effects Version: 24.0
What did you do? Please explain the steps you took before you encountered the problem.
Exported large animations using the AE bodymovin plugin. Played them using lottie-web.
What did you expect to happen?
See the same extent of jank whenever I pass a janky segment.
What actually happened? Please include as much relevant detail as possible.
What I described above: The animation only stutters during the first pass and plays smoothly in each following pass.
Please provide a download link to the After Effects file that demonstrates the problem.
Not sure if I can post this publicly, but if you're willing to find out what this is about, I will fully cooperate and provide the sources:)
Thank you so much for your work on this project and your support. Really appreciate it!
This is a weird one. I hope to at least get some direction on what could be done to optimize the playback performance.
I noticed that lottie-web plays animations much more smoothly, if the parts that are to be played have been rendered before. The most obvious example I can give is the difference I noticed in the rendering performance between the first and every following iteration of an animation being looped. I'm building an interactive scrollytelling experience for browsers, so the animations are fairly complex and surely need to be optimized (e.g. rasterizing unanimated layers, removing masks etc.).
However, what struck me was that even if the animations were janky during the first pass - especially when new scenes that have been hidden off-screen are being shown for the first time - the framerate became much higher whenever I played back a part of the animation that has been rendered before (I can navigate up and down through my animation).
I don't get this. At first I thought that maybe it has to do with the element's
displayvalue being set toblockfor the first time when they first become visible, but even after they are hidden and shown again: No more jank.I should probably mention that I rasterized a lot of the more complex layers to improve the performance (with external assets) so I have a lot of layers that are pngs.
Is there any way I can prerender or set visible but opaque all layers before playing my animation? Is there anything I can do in my AE timeline to reduce this initial jankiness? I even thought about playing back the whole animation at high speed, but this seemed like a very silly workaround.
Tell us about your environment
What did you do? Please explain the steps you took before you encountered the problem. Exported large animations using the AE bodymovin plugin. Played them using lottie-web.
What did you expect to happen? See the same extent of jank whenever I pass a janky segment.
What actually happened? Please include as much relevant detail as possible. What I described above: The animation only stutters during the first pass and plays smoothly in each following pass.
Please provide a download link to the After Effects file that demonstrates the problem. Not sure if I can post this publicly, but if you're willing to find out what this is about, I will fully cooperate and provide the sources:)
Thank you so much for your work on this project and your support. Really appreciate it!