Guest Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
SteveS Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
Guest Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
SteveS Posted July 22, 2022 Share Posted July 22, 2022 Ok. Did you use useLayoutEffect? Link to comment Share on other sites More sharing options...
Guest Posted July 22, 2022 Share Posted July 22, 2022 Yes, afraid it made no difference Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 22, 2022 Share Posted July 22, 2022 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 More sharing options...
Guest Posted July 22, 2022 Share Posted July 22, 2022 Yes im certain Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 23, 2022 Share Posted July 23, 2022 Okay, once we see a minimal demo, I'm sure it'll become more clear. Link to comment Share on other sites More sharing options...
GreenSock Posted July 23, 2022 Share Posted July 23, 2022 Seems to work fine in my minimal demo: See the Pen LYdLQGp?editors=0010 by GreenSock (@GreenSock) on CodePen 🤷♂️ 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