Jump to content

Simion Iulian

Jitters when staggering on a list

Recommended Posts



I'm trying to obtain a smooth animation, meaning getting to obtain over 55fps when the animation is playing. I need this in order to record the animation for a more complex AE animation and if the frame rate drops below that it jitters.


I've tried using force3D, both on the code option, and using a Chrome plug-in. Results were inconsistent. 

I tried playing it in Incognito mode.  Also inconsistent.

I tried pre-loading the timeline like in the codepen. It gave an improvement of a few FPS and fewer drops. The most consistent improvement. Especially when I add other tweens on top of the stagger.


The codepen also gives more jitters than my local setup with WebStorm as there seem to be more GC events. 


I'm playing it on an iMac late 2013, macOs 10.13.3 16GB RAM, Intel Iris Pro graphics card.

Chrome: Version 66.0.3359.181 (Official Build) (64-bit)


Best result was replaying again and again and selecting the recording with least jitter as after some reloads it was acceptable.


Are there any other options or approaches that could help keep the frame rate constant at 60fps?


See the Pen wjbxQJ by simion-iulian (@simion-iulian) on CodePen

Link to comment
Share on other sites

Hi, thanks for the demo.


For anyone else looking into this it appears you have to click on the document twice and then wait about a second before any animation starts.



  • Like 1
Link to comment
Share on other sites

Hm, I don't really have time to analyze and re-engineer things for you, but it looks like you're animating each and every <li> (using 27 different sequenced animations for each) and they're all moving as a group, so why not just toss them into a container and animate that instead?  That way, you only have 1 thing animating instead of 27. 


Also, it looks like you're loading a somewhat recent version of TweenMax, but then some super old versions of CSSPlugin, TimelineMax, TweenLite, and EasePack. If you're loading TweenMax, it already has all of those inside of it, so it's wasteful to load those too. And I'd definitely recommend using the latest version (2.0.0 as of today). 


You've also got a few script tags that are pointing to non-existent files.


Hope that helps at least a little. 

  • Like 2
Link to comment
Share on other sites

Oh, and I forgot to mention that you're asking a lot of the browser by animating that large of an area. You might want to consider at least setting visibility:hidden on any elements that aren't in the viewport so that you can reduce the repaint work that the browser must do.

  • Like 1
Link to comment
Share on other sites

Hi The Mighty @Carl.. Yeah i found that odd. When i click twice i see this in the console it outputs


Clicked false
Clicked false
Clicked true


The user has to click twice and wait for an action which could be a usability issue.


@Simion Iulian Any reason on line 23 ( let play = false;  ) you just don't set that to true so the user only has to click one time ?

On line 23 you have the following:


// you have this
let play = false;

// if you set to true the user only has to click one time
let play = true;


Also couldn't you just animate scrollbar instead like Jack ( @GreenSock ) advised so your only animating one thing, the scrollbar versus staggering animating every <li> tag?


Just my two cents. Happy Tweening :)



  • Like 2
Link to comment
Share on other sites

Looks silky smooth to me, running in Chrome on my Macbook Pro 2015. 



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.