CSS Snap with ScrollTrigger loop

[italoborges]

Hello all!

 

I needed a solution for snapping the content to the nearest one based on the scroll speed.
For that, CSS Snap worked like a charm!

 

Now, with that in place I'm trying to create a loop in the content.

If the content reaches the end and the user keep scrolling, the scroll should be placed at the beginning.

The same behaviour if the user tries to go up when in the first section, the scroll should be placed at the end.

 

There is some conflict here that I can't figure out.

The scrollTrigger configured for the loop doesn't fire when it should.

 

Does anyone can spot the problem?

Many thanks! 

See the Pen RwLQpxP by italoborges (@italoborges) on CodePen

[OSUblake]

Hi italoborges,

 

I've read your question several times, but I still unsure about what you're trying to do. 

 

As for the conflict, you should probably let GSAP do the snapping as your callbacks are creating an endless loop. There are plenty of options to custom the snapping behavior with GSAP.

 

Quote

• Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required):
  • snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above)
  • delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number)
  • directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false.
  • duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.
  • ease [String | Function] - the ease that the snapping animation should use. The default is "power3".
  • inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false
  • onStart [Function] - a function that should be called when snapping starts
  • onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap)
  • onComplete [Function] - a function that should be called when snapping completes

 

[italoborges]

Thanks for your answer @OSUblake and sorry for the confusion.

Basically I wanted to create a loop, when reach the end of the scroll, reset to the beginning. 

When at the beginning if scrolls up, it would go to the end.

 

Regarding the snap property, until now I couldn't make it like the CSS Snap. Still trying though.

The CSS Snap has automatically some features applied that I don't know if I can't the same from ScrollTrigger.

 

For example, when you scroll just a bit, it goes back to the previous section.

If you scroll with a higher speed, it changes to the next section without jumping to other ones. One at a time.

 

[italoborges]

Hi @OSUblake!

I just updated the codepen removing the ScrollTrigger.

That's what I would like to achieve using the snap property from ScrollTrigger. In this way, it would be better to control the scroll and perform the loop.

 

Is it possible to achieve the same result as the css snap using ScrollTrigger snap?

 

See the Pen RwLQpxP?editors=0011 by italoborges (@italoborges) on CodePen

[Cassie]

Probably not exactly no, this isn't hijacking the scroll, so if the user scrolls fast they'll scroll through the sections fast rather than being nudged through the sections at the same speed. 

Personally I think this is better UX, I get very frustrated when I can't scroll at my own pace - but I get why you'd want to do this in some cases.

 

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

[italoborges]

Yes, I get your point @Cassie and I totally agree but the client, you know! haha

 

I created this example just to show the behaviour that I would like to achieve using ScrollTrigger.

Taking your example, I'm going to try to improve the way I need for my particular case! Thank you!