Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rguarnizo

ScrollTrigger, trigger begin before a selector.

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

 

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