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 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...
GSAP Helper Posted July 22, 2022 Share Posted July 22, 2022 I bet the problem is that React 18 runs in "strict" mode locally by default which causes your useEffect() to get called TWICE! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too. .from() tweens use the CURRENT value as the destination and it renders immediately the value you set in the tween, so when it's called the first time it'd work great but if you call it twice, it ends up animating from the from value (no animation). It's not a GSAP bug - it's a logic thing. For example, let's say el.x is 0 and you do this: useEffect(() => { // what happens if this gets called twice? gsap.from(el, {x: 100}) }, []); The first time makes el.x jump immediately to 100 and start animating backwards toward the current value which is 0 (so 100 --> 0). But the second time, it would jump to 100 (same) and animate back to the current value which is now 100 (100 --> 100)! See the issue? So you can either turn off strict mode in React or you can add some conditional logic to your useEffect() call so that it only runs ONCE. Sorta like: const didAnimate = useRef(false); useEffect(() => { // if we already ran this once, skip! if (didAnimate.current) { return; } // otherwise, record that we're running it now and continue... didAnimate.current = true; gsap.from(el, {x: 100}); }, []); Or you could just use .fromTo() tweens so that you define both the start and end values. One of the React team members chimed in here if you'd like more background. If you still need help, please make sure you provide a minimal demo (like in CodeSandbox or CodePen) Link to comment Share on other sites More sharing options...
Guest Posted July 22, 2022 Share Posted July 22, 2022 No sorry its not strict mode. Not only have I disabled it but it only runs in development mode. As its a tool to literally double check errors. I am attempting to trigger the animations in production mode, strict mode doesn't run in this mode. Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 22, 2022 Share Posted July 22, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 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...
Guest Posted July 23, 2022 Share Posted July 23, 2022 I have tried this same mimmal demo and the same issue still occurs. As codepen and code sandbox both run development mode React .Therefore I can't be sure it works unless I'm given a demo running the production version of react and not development mode. Heres the exact code I tried: import * as React from 'react'; import { useEffect, useRef } from 'react'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); export default function About() { const h1 = useRef(null); useEffect(() => { gsap.from(h1.current, { duration: 1, yPercent: 10, opacity: 0, ease: "sine", delay: 0.5, scrollTrigger: { trigger: h1.current, toggleActions: "restart none none reverse" } }); }, []); return ( <div className="space-y-12"> <div className="scroll-down">↓ scroll down ↓</div> <div className="h-[1500px] w-[100px] bg-red-700"></div> <h1 ref={h1}>It seems to work just fine.</h1> <p>Are we missing something?</p> </div> ); } Link to comment Share on other sites More sharing options...
GreenSock Posted July 23, 2022 Share Posted July 23, 2022 10 hours ago, ELG0BLIN0 said: As codepen and code sandbox both run development mode I don't think that's true. Why do you think that? I'm definitely not a React guy, but I could only get React to run in strict mode on CodePen/CodeSandbox by explicitly forcing it with the <StrictMode></StrictMode> wrapper. it sure sounds like something odd with your local setup [maybe?] @SteveS I know you've got React experience - are you able to reproduce this at all? Link to comment Share on other sites More sharing options...
SteveS Posted July 23, 2022 Share Posted July 23, 2022 @ELG0BLIN0 I really can't help you unless you can provide your code in a CSB / CodePen (CSB is usually better for react). It's almost definitely an environment/ config issue and likely doesn't have anything to do with GSAP specifically. I do as much of my development in React as I can and this is not something I regularly experience. It might be worth noting that if you enable StrictMode on the CodePen, it DOES break the example: See the Pen zYWzymy by StevenStavrakis (@StevenStavrakis) on CodePen So CodePen certainly doesn't enable strict mode by default. 1 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