Jump to content
Search Community

Scrolltrigger Does not work properly when element state changes

Akash Ranjan test
Moderator Tag

Recommended Posts

Hi,

 

I am stuck in a weird situation and I am unable to find any solution for this. Basically my elements which are controlled by scrolltrigger start to behave differently when any other items changes states. For example on this site https://cliphire-recruit.web.app/ when you click on JOIN WAITLIST on the navbar after scrolling a bit the cards in the hero area will start to get glitch.

 

All I am doing is for the join waitlist popup is change state which adds a class in it. It was happening with other element states too so I moved them to separate component but I cant move this one.

 

GSAP Code for cards

useLayoutEffect(() => {
    tl.to(heroCardOne.current, {
      scrollTrigger: {
        trigger: heroContainer.current,
        start: 'top 0%',
        end: '80% 0%',
        scrub: true,

        // markers: true,
      },
      x: '200%',
      y: '400%',
      autoAlpha: 0,
      scale: 0.8,
      rotateZ: 20,
      duration: 2,
      ease: 'power2.out',
    }).to(heroCardTwo.current, {
      scrollTrigger: {
        trigger: heroContainer.current,
        start: 'top 0%',
        end: '70% 0%',
        scrub: true,
        //  markers: true,
      },
      x: '200%',
      y: '400%',
      scale: 0.8,
      autoAlpha: 0,
      rotateZ: 20,
      duration: 2,
      ease: 'power2.out',
    });
  
      .to(heroCardThree.current, {
        scrollTrigger: {
          trigger: heroContainer.current,
          start: 'top 0%',
          end: '75% 0%',
          scrub: true,
          //  markers: true,
        },
        x: '-200%',
        y: '400%',
        scale: 0.8,
        autoAlpha: 0,
        rotateZ: -20,
        duration: 2,
        ease: 'power2.out',
      });
    
  }, [tl]);

 

 

And this is the code for popup

  const [openModal, setOpenModal] = useState(false);

  const openModalToggle = useCallback(() => {
    setOpenModal((state) => !state);
  }, []);

 

Please help me I am STUCK :(

Link to comment
Share on other sites

Hi OsuBlake,


Thanks for the reply. Unfortunately I am unable to replicate the issue in minimal sandbox so I have cloned the project and removed extra elements.

 

You can see the issue when you scroll down halfway and click on the button on the navbar then go back up the 3 cards in hero disappear instantly on scroll down and sometime the images that are appearing from the back of the video also stops working.

 

https://codesandbox.io/s/laughing-surf-vt759?file=/src/pages/index.jsx

 

Please help me.

 

Thanks

Link to comment
Share on other sites

Unfortunately, we don't have the resources to go through hundreds of lines of code for you. Please see the Forum Guidelines

 

I would start by going through our React and Advanced React Guides.

 

 

You should never create a timeline outside of a hook.

// bad
const tl = gsap.timeline();

// good
const tl = useRef();

useEffect(() => {
  tl.current = gsap.timeline()
}, []);

 

You're also creating a bunch nested scroll triggers inside a timeline. Please see our Most Common ScrollTrigger Mistakes. There should only be 1 ScrollTrigger per timeline.

 

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thanks alot for these docs. I followed it and put the timelines inside the hooks and also added separate timelines for all the scroll triggers and they are working fine now.

 

The only suggestion I want is that, is it okay to use multiple timelines in single useEffect?

 

Thanks a lot for the help tough.

Link to comment
Share on other sites

36 minutes ago, Akash Ranjan said:

The only suggestion I want is that, is it okay to use multiple timelines in single useEffect?

 

Sure. The only reason to use multiple useEffect/useLayoutEffect is when the dependency array is different.

useEffect(() => {
  ...
}, [foo]);

useEffect(() => {
  ...
}, [bar]);

 

  • 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.
×
×
  • Create New...