Jump to content
GreenSock

Fritze

gsap.context() + React + ScrollTrigger

Go to solution Solved by akapowl,

Recommended Posts

Hi guys. I'm trying to implement a reusable component with ScrollTrigger, but I'm afraid I got something wrong.
What I want to achieve is to transfer the ScrollTrigger animation to a component that I can use multiple times and in multiple other components. Is this possible? I tried to implement it in a next.js application and created a minimal codepen using React. I hope that my problem will become clear. Thanks a million for your amazing lib btw.

 

See the Pen bGKEjrv by fsi77 (@fsi77) on CodePen

Link to comment
Share on other sites

  • Solution

Hello there, @Fritze - and welcome to the forum!

 

.rep IS your component-ref in this case and not an ancestor of/within your component-ref, so I suppose you would need to set the trigger to component.current instead.

 

See the Pen xxzVGOj by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

@akapowl Thank you so much for helping me out and the wonderful welcome. You are a legend. As you have probably guessed, I am new to this reactive and component driven approaches. But if I get it right gsap.context() is brilliant and makes it totally handy and possible to have amazing animations on component level. 

  • Like 2
Link to comment
Share on other sites

 

Happy to help! :) 

 

11 minutes ago, Fritze said:

I am new to this reactive and component driven approaches.

 

I'm relatively new to all that myself - and although React often requires you to think a bit different than usual - and thus undoubtedly, gsap.context() is a brilliant tool, especially for animating in the realm of React - I think it helps keeping in mind, that in the end, all of it is 'just' JavaScript logic.

 

Boiling it down to the minimum, I think, your approach would have been somewhat equivalent to try and target the element that is being looped over in a forEach loop like this - which wouldn't work the way you expected either.

 

See the Pen YzvqXrb by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thank you, that clarifies my mistake in no uncertain terms.

I have to say that sometimes it's really hard for me to recognize things around React. Things for me are far more intuitive with good old selectors in a more native environment like shown in your example. However, it is wonderful that GSAP minimizes the use of useRefs by useContext() so wonderfully. I'm really grateful, as it absolutely reduces error sources and code quantity for me.

Translated with www.DeepL.com/Translator (free version)

  • Like 1
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.
×