Transition between tween and scroll trigger animation

[Vivodionisio]

Hi,

 

I have a hero section where a row of images slide into view  (up and to the left) – when the page loads. The to() tween has an onComplete callback for setting up a ScrollTrigger, which continues the row's movement along the x axis as the user scrolls down the page. The xPercent value at the end of the to() tween is matched with the xPercent value at the beginning of the ScrollTrigger tween so that there is no jumping between values. 

However this only works out if the users waits for the initial to() tween to complete before scrolling. If the user begins scrolling before the to() tween has completed, by the time it does complete, the ScrollTrigger will produce a value beyond its starting value, causing a jump in the animation.

 

Is there a way to smoothly transition between  a to() tweens state and a proceeding ScrollTrigger tween state? Or is there a different approach entirely for this sort of thing?

 

useGSAP(
    () => {
        gsap.fromTo(
          '.image-container ',
          { xPercent: 0, yPercent: 20 },
          {
            xPercent: -3, // matches start value of scroll trigger
            yPercent: 0,
            duration: 1,
            delay: 0.4,
            onComplete: () => {
              setUpScrollTrigger()
            }
          }
        )
      
    },
    { scope: container, dependencies: [isOpen, isReady] }
  )

  function setUpScrollTrigger() {
    gsap.fromTo(
      '.image-container ',
      { xPercent: -3 },
      {
        scrollTrigger: {
          trigger: '.image-container',
          start: 'top 95%',
          scrub: 0.1,
          marker: true
        },
        xPercent: -20,
        duration: 1,
        ease: 'linear'
      }
    )
  }

Thanks in advance. 

 

 

[Rodrigo]

Hi,

 

The simplest thing is to disable the scroll while that initial animation is running to prevent the user from scrolling, like a loading/splash screen, is just a 1.4 seconds wait, I don't think that there would be such a bad UX especially since the user can see some sort of initial setup.

 

Other than that, yeah that would require a bit of custom logic in order to achieve that. Unfortunately we don't have the time resources to provide free general consulting or solving complex logic issues.

 

Also I would advice you to use contextSafe for that method you're using to create the ScrollTrigger instance:

const { contextSafe } = useGSAP(() => {
  gsap.fromTo(".selector", {
    //...
    onComplete: setUpScrollTrigger,
  });
}, {
  scope: container,
  dependencies: [isOpen, isReady]
});

const setUpScrollTrigger = contextSafe(() => {
  gsap.fromTo(element, {
    //...
    scrollTrigger: {
      //...
    }
  });
});

Hopefully this helps. If you keep having issues, please create a minimal demo, using one of the starter templates we have on Stackblitz:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

Happy Tweening!

[Vivodionisio]

Thanks Rodrigo, 

I did try with disabling scroll using the overflow property initially, which wasn't working, maybe because I'm using lenis, and then using Lenis' stop/start functions, which worked wonderfully when navigating from another page, but after a refresh it wouldn't do the re-enabling part, so that users would be stuck at the hero section. Seemed like such a trivial task, so I got frustrated!

I'll come back to it. Thanks for your feedback

 

[Rodrigo]

Hi,

 

Since you have a Premium membership, why not use ScrollSmoother instead of Lenis?

 

You can leverage ScrollSmoother's paused() method:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/paused()

 

And also you can easily and cleanly kill and create your ScrollSmoother instance on route changes as shown here:

https://stackblitz.com/edit/stackblitz-starters-9xvpi2?file=src%2Frouter%2Findex.js

 

Here is a demo using Next just in case:

https://stackblitz.com/edit/stackblitz-starters-cxedmc?file=app%2Fpage.tsx,app%2Flayout.tsx

 

Hopefully this helps.

Happy Tweening!