scroll-snap and ScrollToPlugin not playing nice togehter?

[katerlouis]

Heyho partypeople,

Long time no read

 

I got another issue Blake is probably already preparing a solution for while I'm typing is. I feel like he has a 9th sense for this.

 

Anyhow:

We want to avoid using swiper or any other heavy library for our simple carousel use case. Scroll-Snap + GSAP should be enough. But, but .. but? When animating the scroll position with gsap in a snap-scroll scenario, it seems to not animate smoothly, but rather "flash" in steps.

 

Question 1:

Why is that happening? ScrollToPlugin bug or intended behavior / acceptable caveat?

 

Question 2:

How would you suggest to animate to the "next page" programatically? (I explored removing scroll-snap when gsap is animating, but felt this isn't too elegant and resulted in flashes once the scroll-snap was set again)

 

Thrilled for your answers

 

René ❤️ 

 

See the Pen vYKbpZY?editors=1011 by katerlouis (@katerlouis) on CodePen

[ZachSaucier]

Hey René. 

 

1 hour ago, kreativzirkel said:

Why is that happening? ScrollToPlugin bug or intended behavior / acceptable caveat?

That's caused by the CSS scroll snapping. You can see similar behavior if you just hold down the right arrow to scroll horizontally (i.e. without GSAP). The same behavior also occurs if you use the native .scrollTo() function so it's definitely not an issue with GSAP. Essentially the CSS scroll snapping tries to take control of the scroll position. It doesn't know that there's more scrolling to go, so it snaps.

 

You should probably disable the CSS scroll snapping while the animation is happening then re-enable it afterwards (or if the wheel even happens):

See the Pen vYKbdbp?editors=0010 by GreenSock (@GreenSock) on CodePen

[katerlouis]

Thanks!

Feared so. 

 

What is `overwrite: 'auto'` doing in your scrollTween?

 

Also thanks for the idea of killing the tween when `wheel` event is triggered.

[ZachSaucier]

4 hours ago, kreativzirkel said:

What is `overwrite: 'auto'` doing in your scrollTween?

Killing off any conflicting tweens on the targeted element.

[Jean-Baptiste Demonte]

I'm facing the same issue, and removing the scroll-snap-type during the animation works well for chrome,

but... (as always), when being on safari, the come back of the scroll-snap-type reset the position of the scroller to the begin

 

for now, I have to only play this class switching on chrome.

 

If someone has any trick to get a cross browser working way to fix it, I'll be thankful

[katerlouis]

I'm also curious what the Elders think about this and somewhat hope they are already brewing for a solution behind the curtains

[GreenSock]

It looks like Safari has a bug, as @Jean-Baptiste Demonte mentioned, where it totally resets the scrollLeft/scrollTop whenever scroll-snap-type is re-applied. The workaround I discovered (at least it seems to work for me) is to record the value in an onComplete, then initially set the scrollTop/scrollLeft to slightly more or less (+/-1) and then set it AGAIN to the "real" value that was recorded. 

 

I took a stab at wiring that behavior into ScrollToPlugin - you can preview a beta version at https://assets.codepen.io/16327/ScrollToPlugin3.min.js.  Does that work well for you? 

[Grommas Dietz]

works perfectly for me, thank you!

[Grommas Dietz]

Will this be merged in the near future? I placed it in node_modules/gsap/dist manually. Not sure what’s getting picked when webpack builds my production js, but it only works in developing mode for me.

[GreenSock]

I can't give you an exact launch date yet, sorry, but you can certainly use the beta in the meantime and you're welcome to do an npm install of the .tgz file here: https://assets.codepen.io/16327/gsap-beta.tgz which gets you all the source files, modules, and minified stuff. 

[Grommas Dietz]

ah, that’s great, I will install the beta and give it a try! Thank you!:)