Jump to content
GreenSock

ELG0BLIN0

ScrollTrigger triggering on mount React

Recommended Posts

I have an scrollTrigger animation created in React. In developer mode the animation works fine. But ive noticed that when switching to production mode the animation is played as the components are loaded. Giving the impression that the animation was never triggered.

 

I initially thought that it wasnt triggering at all in production.

I have tried various method to prevent it from triggering such as  a bool to check whether the components mounted.

I have also debugged this as not being an issue related to strict mode as I understand this is common.

Due to this being in the production build strict mode isnt used at all as its purely for the development mode of React.

 

I have several from animations without scrollTrigger that all work as intended regardless of development or production mode.

 

Perhaps someone could give me a workaround or solution to this.

 

Heres the relevant code:

 

import { useEffect } from 'react';
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
 
gsap.registerPlugin(ScrollTrigger);
 
    //Animation
    useEffect(() => {
        gsap.from('#aboutSection', {duration: 1, y: '10%', opacity: '0', ease: 'sine', delay: '0.5', scrollTrigger: {
            trigger: "#aboutSection",
        }});
    }, []);
Link to comment
Share on other sites

Regardless of whether you think this is a strict mode thing, disable strict mode to be sure.

Always put ScrollTriggers into a useLayoutEffect(). I think that will fix it, but if it doesn't add "markers: true" to your scrollTrigger to see when things are actually being triggered.

Link to comment
Share on other sites

Not sure what you mean about scroll triggers ive set the trigger to an element and its an useEffect() I have debugged using both markers:true and console.log() and found that it is triggered when the components are rendered not when the scroll trigger is reached. Strict mode is also disabled.

 

Link to comment
Share on other sites

Ok. Did you use useLayoutEffect?

Link to comment
Share on other sites

Yes, afraid it made no difference

 

Link to comment
Share on other sites

As requested in your other posts, a minimal demo is really essential to being able to troubleshoot something like this. If we can't see it happening and poke around a bit, we're just taking shots in the dark. 

 

Did you put a console.log() right before your tween to make absolutely SURE that it's only getting fired/created once? 

Link to comment
Share on other sites

Yes im certain

 

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.
×