en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en uk en en en de en en ceb en en ru pt en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en de en fa en en ceb en en en en hbs_lat en de en en kn fa en pt en de en en en en en en es kn en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en en en en en it en hu en en en en en fr en nl en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
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 wasn't 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.
import { useEffect } from 'react';
import { gsap } from "gsap";
gsap.from('#aboutSection', {duration: 1, y: '10%', opacity: '0', ease: 'sine', delay: '0.5', scrollTrigger: {
GSAP Helper    42 Likes (Newbie)
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:
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:
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)
Share on other sites
ELG0BLIN0    0 Likes (Newbie)
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.
Share on other sites
GSAP Helper    42 Likes (Newbie)
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   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.
Share on other sites
GreenSock    17,226 Likes (Superhero)
Seems to work fine in my minimal demo:
See the Pen LYdLQGp?editors=0010 by GreenSock (@GreenSock) on CodePen
Share on other sites
ELG0BLIN0    0 Likes (Newbie)
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";
export default function About() {
const h1 = useRef(null);
toggleActions: "restart none none reverse"
↓ scroll down ↓
It seems to work just fine.
Are we missing something?
Share on other sites
GreenSock    17,226 Likes (Superhero)
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    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?
Share on other sites
SteveS    170 Likes (Specialist)
@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.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 3
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
Animation triggering on mount
“GSAP was a revelation for me to be compared with the introduction of jQuery.”
“It's crazy awesome. The whole GSAP platform is, far and away, the best out there for dealing with animation of any sort.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“This is why I have absolutely no issues with paying for a subscription to GSAP, great product and awesome forum!”
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.