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

[fantaz 0 Likes (Newbie)]

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!

[Rodrigo 5,885 Likes (Superhero)]

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!

[fantaz 0 Likes (Newbie)]

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.
 

[Rodrigo 5,885 Likes (Superhero)]

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!