Jump to content
GreenSock

pietdasilva

animate tween on scroll with react-intersection-observer

Recommended Posts

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. 😉

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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()

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.
×