Jump to content


Full screen animation performance

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am using greensock to build a single page application.  I want different pages of the application to come into view in response to UI events.


I built a simple codepen to show one way to do this using absolutely positioned panels.  

See the Pen vFiKy by andrewleith (@andrewleith) on CodePen


The animation is super choppy in chrome.  


  • Anyone know why it would be?  
  • Is there a  fool-proof way to do this?  I tried using both 'x' and 'left' properties in my tweens and neither seemed very good. Panel2 is showing using 'x' and panel3 is showing using 'left'.




Link to comment
Share on other sites

Wow, I'm looking on Chrome on MacBookPro and I'm not seeing an ounce of chop. It actually looks very smooth. 


Also looked in FF and Safari, no problems.


The only glitch I see is that the buttons jump a little as the scroll position changes, but that's not related to GSAP. 


Interested in hearing results from others.

  • Like 1
Link to comment
Share on other sites

Beat me to it Carl :D


Hello al, I too was not seeing any problem.. in Chrome (latest) and FireFox (latest) on Windows 7 (64-bit).


And the scroll position changes Carl was talking about, i was seeing as well... you can get rid of that scroll position change, by adding return false; to your click handlers. Also the ending div for the .buttons class was not a self closing tag. It was <div> instead of </div>.


i forked your example so you can see:

See the Pen DxaqL by jonathan (@jonathan) on CodePen


I noticed your using the to() method to set initial values.. you can use the GSAP set() method instead:.




Also you can use TweenMax.min.js and that will include TweenLite, TimelineLite, CSSPlugin, EasingPlugin, and much more. I loaded TweenMax.min.js in the JS panel - click the gear icon to see it in your forked codepen example above.





Link to comment
Share on other sites

Hey guys thanks alot for looking into this.  I scratched my head for awhile and then i finally noticed i had enabled some mobile-emulation chrome extensions (ripple, as well as the one built into chrome) which made it all so horribly choppy.


Sorry to waste your time.


Thanks for the tip on the set() method, I will use that to intialize values for sure.  And also the tip on tweenmax, I didnt realize i could just load that instead of all the other files.  Very helpful!




  • Like 1
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.