Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
webbersites

Choppy Animation / ScrollTo (w Plugin) and multiple images

Recommended Posts

I have created a sliding portfolio gallery type of page and having the hardest time getting safari in particular to render smooth animations and scrollto's.  I originally was using scrollmagic and tweenmax which was extremely choppy and could not be used, I re-wrote the page to use only Tweenmax and the ScrollToPlugin, it's much better now, but when I have the images visible, the page is still a bit choppy.  I am wondering if there is anything I can do to up the performance.

Link:

http://melissamorgandesign.com/portfolio

 

Here are the tweens that are going on, the trouble seems to be scaling the div/bgimage while scrolling with scrollto.  Going horizontal also adds a wrinkle.  

 

	TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30}});
	TweenMax.to("#div" + section, 1, {width:"60vw"});
	TweenMax.to("#div" + section + " .subsection1", 0.2, {height:" 30vh", delay:0});
	TweenMax.to("#div" + section + " .subsection2", 0.2, {height:" calc(70vh - 3.5vw)", delay:0});
	TweenMax.to("#div" + section + " .subsection1 h2", 0.5, {fontSize: "48px",autoRound: true, delay:1});
	TweenMax.to("#div" + section + " .subsection1 .portfolio-description", 0.5, {autoAlpha: 1, display:'block', delay:1});
	TweenMax.to("#div" + section + " .next-jump", 0.5, {autoAlpha: 0, delay:.1});

 

Any thoughts for smoothing this out?

Link to post
Share on other sites

Hello @webbersites and welcome to the GreenSock Forum!

 

I only had time to look at your site a little

 

Keep in mind that when you animate CSS properties like height and font-size that regardless of which browser you will see that choppy evil. This is due to the browser having to affect layout and only animating on a sub-pixel level witgout snapping. The elements will animate with jank (lost frames) .. aka choppy and jitter city.

 

But regarding your image choppy animation .. that is due to the very large image your trying to animate. Most of those images are like 2000x1092 in dimensions. And the size of them are almost a half a megabyte. That will cause a lot of painting for such a large dimension image.. as well as taking a while to load the page which i saw when i went to your website.

 

You could try to isolate your code to just the issue your seeing to help us help you figure this out. You could also try and add a slight rotation like 0.01 to the tween animating x to help it animate smoother

 

TweenMax.to(window, 1.5, {scrollTo:{x:$("#div" + section).offset().left - 30, rotation:0.01}}); // slight rotation can help with choppy

 

Also inspect your elements animating and make sure they are animating using matrix3d() instead of matrix() for the CSS transform property.

 

But please create a reduced codepen example so we can test the code you are having an issue with instead of havig to debug your whole site.

 

 

Thanks :)

  • Like 5
Link to post
Share on other sites

Jonathan,

 

Thank you for that info.  I removed the css transition, delayed the font resizing and shrunk down the pixel depth for the images on that page.  This helped the performance and it's running much better!    I may still code pen it out but for now I'm pretty happy with it.  I added some deep linking with jquery.address which is coming together nicely.

 

Thank you for your help!

  • Like 1
Link to post
Share on other sites

Could you explain a little more or point me in the right direction for making sure I am using matrix3d() vs matrix() ?  

Link to post
Share on other sites

Glad you got it sorted! ;)

 

Most of the time adding rotation:0.01 to any tween translating x or y will help use matrix3d(). But if you inspect the element animating in browser and you don't see matrix3d() transform in the inline style attribute, then you might have to add z:0.01 but that is a last resort.

 

Also adding transform-style: preserve-3d and backface-visibility: hidden and perspective (on the transformed elements parent) can trigger matrix3d in some WebKit based browsers.

 

So all I can say is to test and inspect.. and then test and inspect in the browser again.. and you should be golden :)

 

  • Like 3
Link to post
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.

×