Jerkiness and skipped frames in .json after render

[ivg-design]

Mac OS X Catalina Browser: Chrome 80.0.3987.116 (Official Build) (64-bit) After Effects Version: 2020 (17.0.2 Build 26)

What did you do?

I have created an animation that combines mask path animation - revealing letters and then used AE Script Super Lines plugin to create additional stroke animation, then I have used EasyBake to bake in all expression then removed all the expressions in the AEP and removed wiggle effect.

What did you expect to happen? - a working .json

What actually happened? I am using bodymovin 5.6.3. the animation renders perfectly fine. the AE bodymovin preview shows the animation working perfectly. However, when I test it on lottiefiles, and webflow, the first run of the animation suffers from jerkyness and skipped frames, but if on loop it works fine subsequentlly - but the first run remains a problem in lottiefiles and on webflow... IVGC Text Logo auto-save 2.aep.zip

here is a screen recording of the issue from lottiefiles preview:

Screen Recording 2020-02-23 at 8.49.05 PM.mov.zip

Here is a screen recording from webflow Screen Recording 2020-02-23 at 8.51.15 PM.mov.zip

and here is a link to the json: https://assets7.lottiefiles.com/packages/lf20_6aVozi.json

Please let me know what can be done to improve it. Thanks in advance!

additionally - when previewed on mobile (IOS) portions of animaitons are missing (for the stroke animations that were baked in - here is link to a lottiefiles preview - https://assets7.lottiefiles.com/private_files/lf30_ZUwIbL.json) please advise which AE options in my AEP aren't supported by bodymovin - I checked and, as far as I see, I am not using anything unsupported

thanks in advance!

additionally, if I use the beta version of Chrome (81) it freezes if I try and preview the animation on lottiefiles... oh fun :)

[ivg-design]

anyone? I don't understand whats going on with this lottie - and I was able to replicate the chrome crash on a different machine...

[bodymovin]

I've been looking at the animation but haven't found anything in particular yet. What you can try is clearing all the keyframes that are not being used which might have a performance impact. And try calling anim.setSubframe(false) on the animation instance to see if it works better.

[ivg-design]

have you tried uploading the animation to lottieweb or webflow? does it glitch for you? because i have tried on two different machines and in both instances i get frame-skipping and jerkiness - and if in chrome beta it freezes and needs to be restarted (i mean chrome)

[bodymovin]

Yes, it seems Chrome is having trouble rendering an animation that changes its dasharray, dashoffset and stroke width. But as I mentioned before, if you set anim.setSubframe(false) everything seems to work fine. If you can open an issue on the Chrome bug tracker and attach it here I'll make sure the Chrome team checks it out.

[ivg-design]

Hi, thank you for that - but can you please explain - I am rather a novice and I don't understand where do I need to set the property you mentioned...

[bodymovin]

I've already shared the issue with them and it seems the problem is because of very small gap and line values. They will have a fix soon. For now, if you set anim.setSubframe(false) everything should work fine.

[ivg-design]

Thank you! - that being said - is there a way to post the json on lottie files and have it use the property you mention? or is that only possible to do if I host the json myself?

[bodymovin]

I don't know. You should ask the lottieFiles team

[ivg-design]

No worries, thanks Hernan! In your experience, how quickly you can expect a fix from the chrome team?

[bodymovin]

Probably around a month

[loogart]

hey @bodymovin - any news on this or if there is proper fix? On Safari 13.1.1 and Firefox 78 the animation works perfectly, yet on Chrome 83, the anchor points are way off, the animations are jerky (despite using the anim.setSubframe(false) fix you mentioned above).

Check out this webpage on Safari vs. Chrome: https://loogart.github.io/fog-my2030-phase1/

Anything I can control from my end to get the Chrome version to match the Safari version? Thanks in advance.

[bodymovin]

@loogart hi, your issue is related to a css property you have set in your document:

*, :after, :before {
    transition: .3s;
}

That property is setting a transition duration of .3s to all properties of all elements of your document, that interferes with the animated values. Besides the fact that it affects lottie animations, those type of global properties can have a huge impact in performance in general. I would suggest that you apply transitions to more localized elements and the specific properties you want to animate.

[loogart]

@bodymovin You are the king of support and thank you for identifying the issue!

[timfiorillo]

@bodymovin Hey just discovered this thread while trying to search for a solution with my issue. https://timfiorillo.com/UFO/index.html (You can see the UFO animation is not smooth when it's initially playing its scroll animation.)

Same deal, lags on first render but smooth after. I built this using Webflow builder and I'm having some trouble figuring out where exactly I have to set anim.setSubframe(false).

Any help you can provide would be greatly appreciated

[timfiorillo]

scratch that. My issue was unsupported animation effects

[Kozaru-eth]

@bodymovin I'm not a coder but I am having the same issue with my AE exported lottie animation on Webflow. The animation skips frames and is jerky. Can you provide the entire code I would have to input for anim.setSubframe(false) in order to get the animation to work? Thanks.

[wendigo99]

@bodymovin Hi! I'm also pretty much starting out creating Lottie animations, I've seen you mention in other posts to use "anim.setSubframe(false)" to fix possible glitches, but I'm not clear exactly where I should input that fix. If you could please provide a little more clarification, that would be very much appreciated. Thanks!