rguarnizo Posted April 25, 2021 Posted April 25, 2021 Hi, I am currently working in a proyect using React, Tailwind css and Scroll Trigger, and I have a problem working to gsap triggers, the problems is that animation starts before the trigger. the structure is as follow: 4 sections, any section is pining for 100% height, and in the third section need to animate 4 containers but, the animation start to happend if i put the selector in the last section. This is the sandbox of example: CodeSandBox
GreenSock Posted April 25, 2021 Posted April 25, 2021 Welcome to the forums, @rguarnizo. I read your question 3 times and looked at the CodeSandBox but I don't understand what your question is or what might be working in a way that's different than you expect. Can you please elaborate? When I scroll down, I see each animation run in a way that seems correct, but I must be missing something.
rguarnizo Posted April 25, 2021 Author Posted April 25, 2021 The expected behavior is that the animation begins just third section pin, i modify again the sandbox changing the trigger in component Brands, before was Ubication(Last section), now is products ,and if you look, the animation has already been done even before reaching that section. Why is it working in this way?
akapowl Posted April 25, 2021 Posted April 25, 2021 Hey @rguarnizo Unfortunately I have no experience with React, so I can not tell you much about the why, but wrapping your .to() with that scrollTrigger attached in a timeout function as suggested in this thread here seems to resolve the issue for me. useEffect(() => { brandsRef.current = gsap.utils.toArray(".brand"); gsap.set(brandsRef.current, { autoAlpha: 0, scale: 0 }); setTimeout(() => { gsap.to(brandsRef.current, { autoAlpha: 1, scale: 1, delay: 5, scrollTrigger: { trigger: ".Products", scrub: 1, start: "top top", markers: true, end: "+=100%" } }); }); }, []); Does that work for you? https://codesandbox.io/s/tender-germain-pmtvb?file=/src/components/app.js 2
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