How to disable scroll trigger when observer is enable or waiting for all animation ended in react

[Krix]

My expect is when the user scroll to the lottie section, it will keep the viewport at that section and play like 50 frames for 1 scroll, continue until the end of lottie frame. Then the scroll behavior will back to normal. If user enter back it will animating in backward way.

 

use can see the example project here: https://codesandbox.io/s/prod-fire-3jyss6?file=/src/LottieAnimation.jsx

[Cassie]

Hi there I can't actually help debug this as I can't scroll at all in the codesandbox demo.

Can anyone else scroll or figure out why it's not scrolling?

[Rodrigo]

Hi,

 

I fiddled a bit with your example and it seems that the way you're creating the Observer instance is getting in the way of scrolling as @Cassie reports.

 

I commented out everything Observer related and I can scroll normally. I'd suggest to ditch the useMemo for now and store your Observer instance in a ref and create it inside your GSAP Context instance. Maybe the fact that the Observer instance is being created outside GSAP Context could be the issue as well. I don't know if useMemo and/or useCallback or any other hook gets called twice in strict mode as the effect hooks, but that could be the issue.

 

Another option could be to store your GSAP Context in a ref and use that in your useMemo, but I would go the route of creating everything inside the effect hook. If you want to spread your code into functions, you can easily create a set of useCallbacks that return the Observer instance so it can be added inside the GSAP Context instance:

const createObserver = useCallback(() => {
  const obs = Observer.create({
    // Config Here
  });
  return obs;
}, [dependencies]);

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    const obs = createObserver();
  });
  return () => ctx.revert();
}, [dependencies]);

Also be aware that this will run twice, when loadAnimation is not defined yet and when is defined:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
  }, containerRef);

  return () => ctx.revert();
}, [loadAnimation]);

You should add a conditional statement to check that is not undefined, no need to run that when loadAnimation is not defined yet.

 

Finally you should take a look at the ScrollTrigger + Lottie helper function:

https://greensock.com/docs/v3/HelperFunctions#lottie

 

Here are a couple of examples:

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

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

 

Hopefully this helps.

Happy Tweening!