Full screen animation performance

[al 2 Likes (Newbie)]

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'.

Thanks!

 

Andrew

[Carl 9,066 Likes (Superhero)]

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.

[Jonathan 5,176 Likes (Superhero)]

Beat me to it Carl

 

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:.

 

http://api.greensock.com/js/com/greensock/TweenMax.html#set()

 

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.

 

http://api.greensock.com/js/com/greensock/TweenMax.html

 

[al 2 Likes (Newbie)]

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!

 

 

Andrew