Scroll Trigger Snap with different behaviour

[Franco95]

Hi there! I'm trying to replicate an effect in my snapping scroll, when I scroll up or down  there is some kind of stop before the other section apears, and I want with a simple scroll go to the  next section.

 

I found a gsap code doing that exactly behaviour that I want but it is using scrollTo and gsap.to, and my code is already different, is there a way to replicate that in my code with the code that I already have? Because I have an "overlaping" effect with "pin: true" that I don't want to lose.

 

 

 

My expected snap behaviour: 

 

See the Pen XWXdypQ by urbgimtam (@urbgimtam) on CodePen

 

My snap behaviour:
Thank you! Have a good day.

See the Pen e9015efd3d44b24f9cce5bef29dee1dd by akapowl (@akapowl) on CodePen

[mvaneijgen]

Hi @Franco95 do you have a minimal demo with your setup and what you've already tried, so we can thinker in your code? 

[Franco95]

1 hour ago, mvaneijgen said:

Hi @Franco95 do you have a minimal demo with your setup and what you've already tried, so we can thinker in your code? 

Hi @mvaneijgen! Yes, I've a minimal demo in codesandbox using React.

 

Here's the link:
CodeSandbox Demo

[mvaneijgen]

To me it seems pretty much like you want it, if you scroll (even just a little) it will snap to the next (or previous section). If that is not what you want I think ScrollTrigger is not the tool for this effect. 

 

Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/. ScrollTrigger is build for animating based on the scroll bar position, if that is not what you want the Observer plugin can watch for scroll events and then do something. Hope it helps and happy tweening! 

 

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

[Franco95]

32 minutes ago, mvaneijgen said:

To me it seems pretty much like you want it, if you scroll (even just a little) it will snap to the next (or previous section). If that is not what you want I think ScrollTrigger is not the tool for this effect. 

 

Have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/. ScrollTrigger is build for animating based on the scroll bar position, if that is not what you want the Observer plugin can watch for scroll events and then do something. Hope it helps and happy tweening! 

 

 

See the Pen

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

by GreenSock (@GreenSock) on CodePen

 

Yes! That is what I want. So I need to change all my code to the observer plugin right?

[mvaneijgen]

Yep pretty much. That is why I personally always like to start with a timeline, that way you can go every possible route, ScrollTrigger, Observer plugin, ect. 

 

If you need any help let us know, when your stuck post back here with a minimal demo which what you've tried and someone will be sure to take a look 

[Franco95]

1 hour ago, mvaneijgen said:

Yep pretty much. That is why I personally always like to start with a timeline, that way you can go every possible route, ScrollTrigger, Observer plugin, ect. 

 

If you need any help let us know, when your stuck post back here with a minimal demo which what you've tried and someone will be sure to take a look 

Well I fix my code a little bit but without using Observer and it seems to work pretty good. Can you tell me if I made a good gsap code?

 

useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      let sections = gsap.utils.toArray(".panel");
      let inGoToSection = false;
  
      function goToSection(i) {
        if (!inGoToSection) {
          inGoToSection = true;
          gsap.to(window, {
            scrollTo: {
              y: i * innerHeight,
              autoKill: false,
              ease: "Power3.easeInOut",
            },
            duration: 0.85,
            onComplete: () => {
              inGoToSection = false;
            },
          });
        }
      }
  
      sections.forEach((eachPanel, i) => {
        ScrollTrigger.create({
          trigger: eachPanel,
          onEnter: () => goToSection(i),
        });
  
        ScrollTrigger.create({
          trigger: eachPanel,
          start: "bottom bottom",
          pin: true,
          pinSpacing: false,
          scrub: 1,
          onEnterBack: () => {
            if (!inGoToSection) {
              goToSection(i);
              console.log("entre");
            }
          },
        });
      });
    });
  
    return () => ctx.revert();
  }, []);

 

[Rodrigo]

Hi,

 

A few notes. The easing function doesn't go in the scrollTo configuration:

// Wrong
gsap.to(window, {
  scrollTo: {
    y: value,
    ease: "power3.inOut",
  },
});
// Right
gsap.to(window, {
  scrollTo: {
    y: value,
  },
  ease: "power3.inOut",
});

In your sections loop, why are you creating two ScrollTrigger instances? You could create one with different start end points and use the right callbacks in order to trigger the function that creates the tween with the ScrollTo Plugin.

 

Finally is always better to use markers during development in order to know exactly when ScrollTrigger is being activated. Not only helps debugging in case there's need to, but also it helps getting a better understanding of how those points and callbacks work.

 

Happy Tweening!