Jump to content
Search Community

Automatic vertical scroll pausing and resuming - Next.js, scrollTo

fantaz test
Moderator Tag

Recommended Posts

I started working on a project and have encountered an obstacle. I wanted to make a flex div automatically scroll to bottom. Is there a way to pause automatic scrolling if the user scrolls that div using mouse wheel up/down? Is there a way to resume scrolling from current position after a short delay if the user stops scrolling?

Here is a minimal demo on codesandbox.

Thanks!

Link to comment
Share on other sites

  • fantaz changed the title to Automatic vertical scroll pausing and resuming - Next.js, scrollTo

Hi,

 

The best option I can think of is using the Observer Plugin in the particular container:

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

 

This seems to work the way you expect:

useIsomorphicLayoutEffect(() => {
  let ctx = gsap.context(() => {
    let restartTimer;
    let t = gsap.to(scrollContainerRef.current, {
      scrollTo: { y: "max", autoKill: true },
      duration: 10,
    });
    Observer.create({
      target: scrollContainerRef.current,
      type: "wheel,touch",
      onChange: () => {
        restartTimer && restartTimer.kill();
        restartTimer = gsap.delayedCall(1, () => {
          const maxScroll =
                scrollContainerRef.current.scrollHeight -
                scrollContainerRef.current.clientHeight;
          const currentScroll = scrollContainerRef.current.scrollTop;
          t = gsap.to(scrollContainerRef.current, {
            scrollTo: { y: "max", autoKill: true },
            duration: 10 * (1 - currentScroll / maxScroll),
          });
        });
      },
    });
  }, comp);
  return () => ctx.revert();
}, []);

Here is a fork of your demo:

https://codesandbox.io/p/sandbox/laughing-pasteur-dtnkxf?file=%2Fcomponents%2FHero.jsx%3A13%2C18

 

Hopefully this helps.

Happy Tweening!

Link to comment
Share on other sites

I added a text slide up animation to the code and made it work so that each appearing line pushes up those before it. Is there a better way to do this?
Here's the code once more:

 const sloganArr = gsap.utils.toArray(".slogan");
      const tl = gsap.timeline();

      sloganArr.forEach((slogan, i) => {
        const tl2 = gsap.timeline({ paused: true });

        tl2.to(sloganArr.slice(0, i), {
          y: `-=50`,
          duration: 1,
        });

        tl.from(slogan, {
          y: 50,
          duration: 1,
          autoAlpha: true,
          onStart: () => {
            tl2.play();
          },
        });
      });

Codesandbox is here.
 

Link to comment
Share on other sites

Hi,

 

I'm not sure I understand what you're trying to do. The code you have in place is doing exactly what is supposed to do.

 

Please be more specific about what you're intend to do and if possible add a link to an example.

 

Happy Tweening!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...