Problems / Stuttering with ScrollTo

[sgloeggl]

Hello everyone,

I just recently got into coding so I'm already sorry if this is a dumb question of any sorts.

But I currently developing our own agency website and got a very simple effect where the top section scrolls down to the 2nd section with a 2-line text animating down (2nd line revealing behind the upper box).

 

So far loving gsap but I got some issues with very fast scroll where the scrollTo animation gets triggered multiple times while still animating and where the whole animation sometimes stutters or isn't executed smoothly.

Also hoping the way I set up the animation is the right way to do it.

 

Would appreciate any help.

Thanks

A development newbie

See the Pen MWGNGzM by sgloeggl (@sgloeggl) on CodePen

[Rodrigo]

Hi @sgloeggl and welcome to the GreenSock forums!

 

The main issue here is that at some point you have ScrollTrigger controlling the animation and then ScrollTo enters and takes over the scrolling which, depending on the position, can go over one of the trigger points (start or end). I think that the best option is to take the animation away from ScrollTrigger or remove ScrollTo if you want to keep ScrollTrigger.

 

Now I went a bit overboard with this but I created three different examples so you can compare them and see which one is the best fit for you.

 

Only ScrollTrigger. In this one there is no ScrollTo plugin, just ScrollTrigger with a specific snapping configuration. This might be the farthest from your original example, but I think is valuable to show how snapping works on ScrollTrigger:

See the Pen MWGNBpE by GreenSock (@GreenSock) on CodePen

 

ScrollTo and Observer. This uses the Observer plugin (included in ScrollTrigger) to watch the wheel event on both sections and trigger a ScrollTo animation and play/reverse the text animation:

See the Pen RwyXBdW by GreenSock (@GreenSock) on CodePen

 

ScrollTrigger and ScrollTo. This uses ScrollTrigger only to check the onLeave and onEnter events in the second section and triggers the text animation and the ScrollTo animation. It seems to be the better of them IMO:

See the Pen vYjoaMN by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started.

 

Let us know if you have more questions.

 

Happy Tweening!

[sgloeggl]

Hello Rodrigo,

I'm very sorry for the late reply. Things got in the way and couldn't continue with the project till now.

Thanks very much for the effort and for the detailed explanation (also helped me understand the inner workings of GSAP better). I think I'll go with your third version.

 

Thanks again!

Stefan

[sgloeggl]

Hello Rodrigo,

it's me again 😅 may I ask some other thing. The website is now finally almost finished.

https://desein.gloeggl.com/ (still on dev subdomain)

But the effect I talked about still seems to stutter a bit (hugely depending on type of mouse and trackpad used).

For example with the trackpad of my macbook and my Logi Master MX3 it doesn't work that well if I scroll down to fast. Would you know any fix for this? Would be really appreciated.

Thaaaanks

Stefan

[Cassie]

Hi there! Sorry to hear you've run into some performance issues.

A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: 

 

1. Try setting will-change: transform on the CSS of your moving elements. 
2. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. 
3. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render.
4. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow)
5. Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can.
6. Upgrade to the latest version of GSAP 3.11.5 in case there are any recent bugfixes
7.  Try normalizeScroll() - this can fix some scroll related IOS issues. 

 

 

Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" 
 

I hope this helps!  💚