Giannetta Posted November 2, 2022 Share Posted November 2, 2022 Hi all guys, I have a problem with animations with React and ScrollTrigger. I would like the animations to start only when the section is in view and controlled by scroll zooming and rotating the text. When I reload the page the animations are already loaded. Thank you for your help. See the Pen NWzNNjN by Giannetta (@Giannetta) 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 @Giannetta - welcome to the forum. 10 minutes ago, Giannetta said: I would like the animations to start only when the section is in view and controlled by scroll zooming and rotating the text. When I reload the page the animations are already loaded. That is the case because your trigger elements in vertical scroll already are at 'center center', which is your start. If you want to trigger tweens in a fake horizontal scrolling scenario as such, best have a look at containerAnimation. This is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. Also when working in React, you really might want to have a look at gsap.context(). https://greensock.com/docs/v3/GSAP/gsap.context() In this pen I only included the containerAnimation part mentioned, not the .context() part. That I'll leave up to you. Hope this helps! See the Pen GRGZjKy by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
Giannetta Posted November 2, 2022 Author Share Posted November 2, 2022 3 hours ago, akapowl said: Hello @Giannetta - welcome to the forum. That is the case because your trigger elements in vertical scroll already are at 'center center', which is your start. If you want to trigger tweens in a fake horizontal scrolling scenario as such, best have a look at containerAnimation. This is from the docs: containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. Also when working in React, you really might want to have a look at gsap.context(). https://greensock.com/docs/v3/GSAP/gsap.context() In this pen I only included the containerAnimation part mentioned, not the .context() part. That I'll leave up to you. Hope this helps! hello and thanks for the quick response! I tried to insert the context with React, the only thing is that I wanted to fix the element in the center and have it rotate on scroll but I read what you reported "Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. " How can I manage to lock the section and make it animation at scroll with Pin? I tried to use end: "+=2000" but nothing done thank you. Link to comment Share on other sites More sharing options...
akapowl Posted November 2, 2022 Share Posted November 2, 2022 Yup, pinning isn't possible in a scenario as such, because you are not actually scrolling horizontally, but merely animating the content to the left. Thus you'd have to adjust things animation-wise to achieve a similar effect to pinning. This recent thread shows one way for that and also contains links to other approaches in other threads. 3 Link to comment Share on other sites More sharing options...
Giannetta Posted November 4, 2022 Author Share Posted November 4, 2022 On 11/2/2022 at 6:53 PM, akapowl said: Yup, pinning isn't possible in a scenario as such, because you are not actually scrolling horizontally, but merely animating the content to the left. Thus you'd have to adjust things animation-wise to achieve a similar effect to pinning. This recent thread shows one way for that and also contains links to other approaches in other threads. hi, i am here again I tried to fix the code to be able to use the pin in the horizontal fake. I succeeded in what I wanted, but I wanted to know if what I wrote is good practice or I might have some problems going forward with the code. thanks again! See the Pen WNywwjx by Giannetta (@Giannetta) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted November 4, 2022 Share Posted November 4, 2022 Hi, I don't see any issues in your code, is clean, simple and easy to follow. Perhaps the only advice I would give you is to take advantage of GSAP Context's selectors. All you have to do is just pass the parent as scope and GSAP will look for descendants of that elements when using a selector text, that will save you from creating and storing multiple refs (refs hell). https://greensock.com/docs/v3/GSAP/gsap.context() Let us know if you have more questions. Happy Tweening! 2 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