Immediate Snapping

[Brandemic]

Hey everyone, I'm new to GSAP and trying to learn. I've hit a roadblock. 
 

I'm trying to make something scroll immediately after it's pinned, but it's not behaving as I want. When it gets pinned, I need it to jump to 25% right away, and then jump again to the next 25% each time I scroll. Even though I tried adding snap, it's not happening instantly. I don't want it to stop scrolling at any point except every 25%.

Something like this but I want it in GSAP: 

See the Pen YzgmeGY by Fahad-Aameer (@Fahad-Aameer) on CodePen

See the Pen xxBvYGE by Fahad-Aameer (@Fahad-Aameer) on CodePen

[mvaneijgen]

Hi @Brandemic welcome to the forum and thanks for being a club member!

 

ScrollTrigger is build to hook animations to the scroll bar position, but you're looking for a tool that watches for a scroll event and then does some logic based on that, have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ that does exactly what you're describing 

 

Check out this demo from the docs, you can scroll as much as you want, but it only navigates to the next 'slide' when the current slide has done animating, this would be the basis on which I would build the animation you're looking for. Hope it helps and happy tweening!  

 

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

 

And here an example that mixes normal scroll with the Observer plugin

 

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

[Rodrigo]

Hi @Brandemic,

 

In this thread Jack explains why the snapping is not immediately and why that can't be achieved just with ScrollTrigger:

 

Finally maybe this demo  can help a bit:

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

 

Happy Tweening!

[Brandemic]

6 hours ago, mvaneijgen said:

Hi @Brandemic welcome to the forum and thanks for being a club member!

 

ScrollTrigger is build to hook animations to the scroll bar position, but you're looking for a tool that watches for a scroll event and then does some logic based on that, have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ that does exactly what you're describing 

 

Check out this demo from the docs, you can scroll as much as you want, but it only navigates to the next 'slide' when the current slide has done animating, this would be the basis on which I would build the animation you're looking for. Hope it helps and happy tweening!  

 

 

 

 

And here an example that mixes normal scroll with the Observer plugin

 

 

 

Thanks for the reply, I tried to replicate the example in my code, I tried to understand the code and follow it through but it is not working as expected. when I inspected, it is not getting disabled when the section gets unpinned, also, the main scroller still scrolls. The observer docs is so confusing. Actually it never gets unpinned, it's stuck on pin

[Brandemic]

Don't know why, my codepen link is not showing

 

See the Pen KKEObGr by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

The issue here is related to the start point of your ScrollTrigger instance as shown in the image:

That is without scrolling yet. As you can see the start point has already been passed.

 

This can be solved with ScrollTrigger's clamp feature:

 

ScrollTrigger.create({
  trigger: ".dotme-widgets-container",
  pin: true,
  start: "clamp(top 20%)",
  ...
});

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[Brandemic]

Actually I had Lenis applied in my project, it didn't work well with the observer. I removed Lenis and now it's working fine.