Fritze Posted November 2, 2022 Share Posted November 2, 2022 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 More sharing options...
Solution akapowl Posted November 2, 2022 Solution Share Posted November 2, 2022 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 4 Link to comment Share on other sites More sharing options...
Fritze Posted November 2, 2022 Author Share Posted November 2, 2022 @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. 2 Link to comment Share on other sites More sharing options...
akapowl Posted November 2, 2022 Share Posted November 2, 2022 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 3 Link to comment Share on other sites More sharing options...
Fritze Posted November 2, 2022 Author Share Posted November 2, 2022 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) 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now