animate tween on scroll with react-intersection-observer

[pietdasilva 1 Likes (Newbie)]

https://codesandbox.io/s/question-7xosql?file=/src/App.js

 

hi friends! on the exemple above i was trying to animate a tween on scroll without gsap's scrolltrigger, so i found this api but i'm having trouble to integrate it with gsap, can someone give me a hint? thanks!

[GreenSock 17,880 Likes (Superhero)]

Just curious - why do you want to avoid ScrollTrigger? It's way more powerful than that other tool, and it's integrated with GSAP. 

 

Anyway, I have no idea what that other tool does and since it's not a GreenSock product, it's not something we can support here. But I'd recommend updating to GSAP 3.11.x and using the new gsap.context() which helps a lot in React environments. 

 

useEffect(() => {
  let ctx = gsap.context(() => {
    gsap.from(".itemB", {
      x: "200px",
      duration: 4
    });
  });
  return () => ctx.revert(); // cleanup!
}, [inView]);

Seems to work, at least the first time. But that other tool doesn't seem to fire every time the element enters the viewport again. That'd be super easy with ScrollTrigger. 😉

[Rodrigo 4,818 Likes (Superhero)]

Hi,

 

I took a quick look at the package's docs and even the simplest setups need an extra wrapper component to work:

https://codesandbox.io/s/inview-render-props-hvhcb?fontsize=14&hidenavigation=1&theme=dark&file=/src/elements/ScrollWrapper.tsx

https://codesandbox.io/s/useinview-ud2vo?fontsize=14&hidenavigation=1&theme=dark&file=/src/elements/ScrollWrapper.tsx

Now if you ask me that's a bit more hassle than expected, especially since ScrollTrigger does that and much more, and it doesn't rely on the intersection observer which makes it more efficient.

 

So if you want your code to work, you'll have to create that extra wrapper and then you'll be able to check when the element is in view and run your animation.

 

This is how your code looks with ScrollTrigger:

https://codesandbox.io/s/question-forked-fodb1j?file=/src/App.js

 

Happy Tweening!

[pietdasilva 1 Likes (Newbie)]

@Rodrigo @GreenSock hi guys, sorry it took so long for me to answer. thank you for both your answers, i'll try to apply both of them on my projects. i love scrolltrigger and never had a problem with it. but the thing is, there are situations where i don't really know how to work with it, like on this css parallax effect, where it affects the scrollbar with a fixed height on a div.

https://youtu.be/mxHoPYFsTuk?t=232

 

another situation would be with a package like locomotive, since it kinda do the same thing affecting the original scroll bar in order to give a smooth scoll (really wish i could afford club greensock and do those things through gsap only 😥)

 

so those situations made me look for react-intersection-observer and avoid scrolltrigger with is a shame

 

if i'm missing something here let me know

 

thanks!

[Rodrigo 4,818 Likes (Superhero)]

Hi,

 

Even though Scroll Trigger aim is to work with animations and make their progress scroll-based, you can also use it to check if an element is in the viewport or not. Check ScrollTrigger's positionInViewport and isInViewport methods:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.positionInViewport()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()

 

Let us know if you have other questions or issues on the subject and if possible do your best to provide a minimal demo.

 

Happy Tweening!

[GreenSock 17,880 Likes (Superhero)]

ScrollSmoother has parallax features built in, making it very easy. Hopefully you'd find that the Club GreenSock membership would pay for itself very quickly when you consider all the time it'll save you, the added capabilities, etc. But I totally understand if you just can't afford it right now. You can use LocomotiveScroll with ScrollTrigger - we just can't officially support it since LocomotiveScroll is not a GreenSock product. See https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()