Scroll snap for specific section and wait before snapping

[TruongNH]

I have been stuck here for a week.

 

I'm trying to make a scroll snap from section 1 to section 2 with a delay time for exit animation and reverse. From section 2 to section 4 it can be a normal scroll.

 

I'm using overflow: hidden that I can't let it go. This is the reason that I think it prevents me from scrolling snap and normal scroll.

 

The scroll way I try to achieve is exactly the same as this website: David | Creative Developer (david-hckh.com)

 

Here is the codesandbox : https://codesandbox.io/s/scroll-rfjx9k

 

How can I achieve this ? 

 

 

Please help me with this....

[Rodrigo]

Hi @TruongNH and welcome to the GreenSock forums!

 

Actually that site is not using scrolling at all if you inspect with devtools. Is actually moving things on the Y axis.

 

For that you can use the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

That doesn't mean that this can't be done with ScrollTrigger. You can combine it with the ScrollTo Plugin in order to achieve this effect:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx

 

Navigate to the Layers Section route in order to see it in action.

 

Hopefully this helps.

Happy Tweening!

[TruongNH]

Thanks for giving a solution. I have tried to use Observer to snap between landingpage(section 1) and scroll-container (section 2) .

 

But I have a problem I can't scroll snap between section 1 and section 2 and freescroll for scroll-container.

 

Where am I wrong and where am I lacking ?

 

Here is the code sandbox: scroll - CodeSandbox

[TruongNH]

On 9/26/2023 at 7:06 AM, Rodrigo said:

Hi @TruongNH and welcome to the GreenSock forums!

 

Actually that site is not using scrolling at all if you inspect with devtools. Is actually moving things on the Y axis.

 

For that you can use the Observer Plugin:

https://greensock.com/docs/v3/Plugins/Observer

 

That doesn't mean that this can't be done with ScrollTrigger. You can combine it with the ScrollTo Plugin in order to achieve this effect:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx

 

Navigate to the Layers Section route in order to see it in action.

 

Hopefully this helps.

Happy Tweening!

Thanks for giving a solution. I have tried to use Observer to snap between landingpage(section 1) and scroll-container (section 2) .

 

But I have a problem I can't scroll snap between section 1 and section 2 and freescroll for scroll-container.

 

Where am I wrong and where am I lacking?

 

Here is the code sandbox: scroll - CodeSandbox

[Rodrigo]

Hi,

 

There are a few things to notice here.

 

The site you posted as an example doesn't use scrolling at all. That doesn't mean that is not possible, is just weird to have natural scroll, having the scroll bar visible and not being allowed to scroll. These examples combines ScrollTrigger with Observer:

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

See the Pen oNdNLxL by GreenSock (@GreenSock) on CodePen.

 

Finally you are using your ScrollManager file as a React component. While I can see the value of abstraction and keeping your code more organized IMHO I don't see that as a good and solid approach. Keep in mind that in React child component are rendered first and then their parents, so the code in that particular file runs before the DOM elements are mounted in the DOM on t he first run, so you could get some errors there. Also you are not using effect hooks, GSAP Context or doing proper cleanup in your app. I'd strongly recommend you to create your GSAP code in the same file it'll be used at first and then start abstracting away and micro-optimizing your code. First make it work the way is supposed and make it as easy to follow as possible (comments are helpful here), then make it pretty. Finally read the resources in this page:

 

Hopefully this helps.

Happy Tweening!

[TruongNH]

On 9/27/2023 at 10:51 PM, Rodrigo said:

Hi,

 

There are a few things to notice here.

 

The site you posted as an example doesn't use scrolling at all. That doesn't mean that is not possible, is just weird to have natural scroll, having the scroll bar visible and not being allowed to scroll. These examples combines ScrollTrigger with Observer:

 

 

 

 

 

 

Finally you are using your ScrollManager file as a React component. While I can see the value of abstraction and keeping your code more organized IMHO I don't see that as a good and solid approach. Keep in mind that in React child component are rendered first and then their parents, so the code in that particular file runs before the DOM elements are mounted in the DOM on t he first run, so you could get some errors there. Also you are not using effect hooks, GSAP Context or doing proper cleanup in your app. I'd strongly recommend you to create your GSAP code in the same file it'll be used at first and then start abstracting away and micro-optimizing your code. First make it work the way is supposed and make it as easy to follow as possible (comments are helpful here), then make it pretty. Finally read the resources in this page:

 

Hopefully this helps.

Happy Tweening!

@Rodrigo Thanks for your instructions. I have tried with your instructions and I have reached the snap between section 1 and section 2. But for a normal scroll from section 2 I have overflow: hidden. So I'm trying to make a normal scroll by Y. Currently I'm using auto-increase height. I want to make it scroll value height.

 

How can I reach that? 

This is what I have reached: https://codesandbox.io/s/scroll-rfjx9k

 

[Rodrigo]

Hi,

 

Your example is a quite convoluted IMHO. Again I don't see the benefit of that ScrollManager.js file that you are using like a component. If you want to use that approach I would suggest a custom hook, but not a component.

 

You're still not using GSAP Context, as suggested in the articles you can read in the link I provided in my previous post.

 

Unfortunately we don't have te time resources to create custom solutions for our users, solve complex logic issues or comb through large codebases trying to find errors and or issues, so I can't create a port to React of this example at the moment. The best I can do is create a Codepen example fo multiple Observer sections:

See the Pen zYyLdrB by GreenSock (@GreenSock) on CodePen.

 

The JS logic is not out of this world and you should be able to port it to React by following our guide to use GSAP in React environments.

 

I think your best alternative is to create something as simple as possible and start adding enhancements to it as you go along.

 

Hopefully this helps.

Happy Tweening!

[skole]

On 9/27/2023 at 5:51 PM, Rodrigo said:

Hi,

 

There are a few things to notice here.

 

The site you posted as an example doesn't use scrolling at all. That doesn't mean that is not possible, is just weird to have natural scroll, having the scroll bar visible and not being allowed to scroll. These examples combines ScrollTrigger with Observer:

 

 

 

 

 

 

Finally you are using your ScrollManager file as a React component. While I can see the value of abstraction and keeping your code more organized IMHO I don't see that as a good and solid approach. Keep in mind that in React child component are rendered first and then their parents, so the code in that particular file runs before the DOM elements are mounted in the DOM on t he first run, so you could get some errors there. Also you are not using effect hooks, GSAP Context or doing proper cleanup in your app. I'd strongly recommend you to create your GSAP code in the same file it'll be used at first and then start abstracting away and micro-optimizing your code. First make it work the way is supposed and make it as easy to follow as possible (comments are helpful here), then make it pretty. Finally read the resources in this page:

 

Hopefully this helps.

Happy Tweening!

Hello, is this imported to React? I'm trying this myself and can't get it to work, this is my code:

 useGSAP(() => {
    let allowScroll = true; // sometimes we want to ignore scroll-related stuff, like when an Observer-based section is transitioning.
    let scrollTimeout = gsap.delayedCall(1, () => (allowScroll = true)).pause(); // controls how long we should wait after an Observer-based animation is initiated before we allow another scroll-related action
    let currentIndex = 0;
    let swipePanels = gsap.utils.toArray(".panel");

    // set z-index levels for the swipe panels
    gsap.set(swipePanels, { zIndex: (i) => swipePanels.length - i });

    // create an observer and disable it to start
    let intentObserver = ScrollTrigger.observe({
      type: "wheel,touch",
      onUp: () => allowScroll && gotoPanel(currentIndex - 1, false),
      onDown: () => allowScroll && gotoPanel(currentIndex + 1, true),
      tolerance: 10,
      preventDefault: true,
      onEnable(self) {
        allowScroll = false;
        scrollTimeout.restart(true);
        // when enabling, we should save the scroll position and freeze it. This fixes momentum-scroll on Macs, for example.
        let savedScroll = self.scrollY();
        self._restoreScroll = () => self.scrollY(savedScroll); // if the native scroll repositions, force it back to where it should be
        document.addEventListener("scroll", self._restoreScroll, {
          passive: false,
        });
      },
      onDisable: (self) =>
        document.removeEventListener("scroll", self._restoreScroll),
    });
    intentObserver.disable();

    // handle the panel swipe animations
    function gotoPanel(index, isScrollingDown) {
      // return to normal scroll if we're at the end or back up to the start
      if (
        (index === swipePanels.length && isScrollingDown) ||
        (index === -1 && !isScrollingDown)
      ) {
        intentObserver.disable(); // resume native scroll
        return;
      }
      allowScroll = false;
      scrollTimeout.restart(true);

      let target = isScrollingDown
        ? swipePanels[currentIndex]
        : swipePanels[index];
      gsap.to(target, {
        yPercent: isScrollingDown ? -100 : 0,
        duration: 0.75,
      });

      currentIndex = index;
    }

    // pin swipe section and initiate observer
    ScrollTrigger.create({
      trigger: ".swipe-section",
      pin: true,
      start: "top top",
      end: "+=200", // just needs to be enough to not risk vibration where a user's fast-scroll shoots way past the end
      onEnter: (self) => {
        if (intentObserver.isEnabled) {
          return;
        } // in case the native scroll jumped past the end and then we force it back to where it should be.
        self.scroll(self.start + 1); // jump to just one pixel past the start of this section so we can hold there.
        intentObserver.enable(); // STOP native scrolling
      },
      onEnterBack: (self) => {
        if (intentObserver.isEnabled) {
          return;
        } // in case the native scroll jumped backward past the start and then we force it back to where it should be.
        self.scroll(self.end - 1); // jump to one pixel before the end of this section so we can hold there.
        intentObserver.enable(); // STOP native scrolling
      },
    });
  }, []);

[GreenSock]

@skole is this related to your other post?: 

 

 

Please make sure you're not posting about the same issue in multiple threads. 

 

If you need help, make sure you provide a minimal demo (like a Stackblitz) that clearly illustrates the issue. Here's one you can fork: https://stackblitz.com/edit/react-cxv92j

 

Good luck!

[skole]

On 12/24/2023 at 7:31 PM, GreenSock said:

@skole is this related to your other post?: 

 

 

Please make sure you're not posting about the same issue in multiple threads. 

 

If you need help, make sure you provide a minimal demo (like a Stackblitz) that clearly illustrates the issue. Here's one you can fork: https://stackblitz.com/edit/react-cxv92j

 

Good luck!

Oh yea, I forgot about that, thanks for answering.

Unfortunately I can't provide demo because it's private project that I'm working on, but it's using NextJS, and css is standard. So sorry, but if you could help in some way I would appreciate it.  

[GreenSock]

1 hour ago, skole said:

Unfortunately I can't provide demo because it's private project that I'm working on, but it's using NextJS, and css is standard. So sorry, but if you could help in some way I would appreciate it.  

Oh, we definitely don't want you to just share your whole project. The proper way to do this is to just recreate the issue in the most minimal way possible, with simple colored <div> elements, for example. No need to have any real artwork, logos, or anything like that from your "real" project. I already gave you a link to a starter template you can fork, so hopefully it's pretty easy for you. We really can't troubleshoot blind - we've gotta see the issue in context in order to offer solid advice. 

[skole]

On 12/28/2023 at 9:27 PM, GreenSock said:

Oh, we definitely don't want you to just share your whole project. The proper way to do this is to just recreate the issue in the most minimal way possible, with simple colored <div> elements, for example. No need to have any real artwork, logos, or anything like that from your "real" project. I already gave you a link to a starter template you can fork, so hopefully it's pretty easy for you. We really can't troubleshoot blind - we've gotta see the issue in context in order to offer solid advice. 

But if I strip everything, it works, I'm using AOS for some animations and stuff, maybe is that?

 

Could code you provided be translated to react?

[GreenSock]

23 hours ago, skole said:

But if I strip everything, it works, I'm using AOS for some animations and stuff, maybe is that?

I'm not at all familiar with AOS, but it certainly sounds like that could be the culprit if you strip it out and everything else works. That's the key with troubleshooting - isolate, isolate, isolate. Create a minimal demo with the bare bones basics, then start building it up to be closer and closer to your "real" project until it breaks and then you know exactly what caused the break. 

 

I'm curious why you're using AOS in addition to GSAP (instead of just GSAP). Maybe there's a great reason; I'm just unfamiliar with it so I figured I'd ask.

 

23 hours ago, skole said:

Could code you provided be translated to react?

Absolutely. GSAP is completely framework agnostic. Works great in React or anywhere. We've got a useGSAP() hook for React that makes it even simpler. See https://gsap.com/react for details. 

[skole]

On 12/31/2023 at 12:08 AM, GreenSock said:

I'm not at all familiar with AOS, but it certainly sounds like that could be the culprit if you strip it out and everything else works. That's the key with troubleshooting - isolate, isolate, isolate. Create a minimal demo with the bare bones basics, then start building it up to be closer and closer to your "real" project until it breaks and then you know exactly what caused the break. 

 

I'm curious why you're using AOS in addition to GSAP (instead of just GSAP). Maybe there's a great reason; I'm just unfamiliar with it so I figured I'd ask.

 

Absolutely. GSAP is completely framework agnostic. Works great in React or anywhere. We've got a useGSAP() hook for React that makes it even simpler. See https://gsap.com/react for details. 

For some reason, I don't know how to translate to react the code that you provided in sandbox, it just doesnt work, is there and available examples or translations for that?

[GreenSock]

2 hours ago, skole said:

For some reason, I don't know how to translate to react the code that you provided in sandbox, it just doesnt work, is there and available examples or translations for that?

For what?  Which code that I provided? What CodeSandbox? 

 

Did you read this article?: https://gsap.com/react

 

It's beyond the scope of help we can provide in these free forums to build a React project for you, but if you create a minimal demo that clearly illustrates a GSAP-related issue, we'd be happy to take a look at that and offer some advice. Here's a React starter template: 

https://stackblitz.com/edit/react-cxv92j

[Bhavin]

hey i also have same problem i have multiple divs and i want one div snap animations like observer. but i want to  use observer only for one section and another sections have normal scroll. Recently i am doing it with Pinning and snap to of scrolltrigger and i am using lenis for smooth scrolling so it takes little time to snap to top. and i am using scrolltrigger normalize scroll also for touch devices (yes it hs little bit problematic on IOS). i am providing the codepen also( can u help me how to add codepen)

[Bhavin]

On 10/14/2024 at 12:34 PM, Bhavin said:

hey i also have same problem i have multiple divs and i want one div snap animations like observer. but i want to  use observer only for one section and another sections have normal scroll. Recently i am doing it with Pinning and snap to of scrolltrigger and i am using lenis for smooth scrolling so it takes little time to snap to top. and i am using scrolltrigger normalize scroll also for touch devices (yes it hs little bit problematic on IOS). i am providing the codepen also( can u help me how to add codepen)

can anyone help me i dont know how to add codepen

See the Pen XWvMdBX by Bhavin-Raut (@Bhavin-Raut) on CodePen.

this is my codepen

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Bhavin]

See the Pen XWvMdBX by Bhavin-Raut (@Bhavin-Raut) on CodePen.

this is my codepen

see it takes time to take snap to position to top and if we fast scroll it will directly go to section end i just want to change 1 section even after scroll is too fast and it should change just like observer.

[Rodrigo]

Hi,

 

Snap has to take some time because ScrollTrigger cannot snap until scrolling has completely stopped. It has to keep watching the scroll position until it has not changed for a little while, otherwise snapping would interfere with normal user scrolling. So even if you set delay: 0, it won't actually have zero delay. That's simply impossible. So a certain amount of delay is to be expected. And then when you've got Lenis activated, that slows down what the scroll position does anyway.

 

You can use the approach in this demo in order to snap directly between sections:

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

 

Hopefully this helps

Happy Tweening!

[Bhavin]

see its little jaggering and not looking better do i have another option?

 

[Rodrigo]

The Observer Plugin could be an alternative but is a different setup though:

https://gsap.com/docs/v3/Plugins/Observer/

 

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

 

See the Pen ExEOeJQ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this  helps

Happy Tweening!

[Bhavin]

use lenis also and i dont want first section and second section has observer i want middle section will go through observer and again normal section with lenis scroll 

See the Pen VwobjWX by Bhavin-Raut (@Bhavin-Raut) on CodePen.

see like below codepen i used it will lenis scroll so its not working well if i use data lenis prevent for that section it will work little fine but again it fills littlejaggering.

[Rodrigo]

Hi,

 

Unfortunately Lenis is not a GSAP product (we have our own smooth scrolling solution on ScrollSmoother) and we can't really offer support for it, we have to focus our time resources on GSAP related questions.

 

Lenis does have it's own scrollTo method as seen in their docs:

https://github.com/darkroomengineering/lenis?tab=readme-ov-file#instance-methods

 

So you can use that instead of the ScrollTo Plugin solution in this demo:

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

 

In the gotoSection method on line 19, you can replace that with Lenis' implementation of scrollTo.

 

Hopefully this helps

Happy Tweening!

[Bhavin]

yes its nice but its not disabling the fast scroll if you help me to disable the fast scroll in this, i'll use it for my next page. and i am using 

i am adding some msg in my next reply