Jump to content
Search Community

Choppy Animation / ScrollTo (w Plugin) and multiple images

webbersites test
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 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 comment
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 comment
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 comment
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 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.
×
×
  • Create New...