ScrollTrigger Not working properly

[Pradeep Kumar]

I have attached a simple code where you can lookup the issue in one look.

Please note that, this project in next js.

 

{
  "name": "my-app-type",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "gsap": "^3.10.2",
    "next": "12.1.4",
    "next-transpile-modules": "^9.0.0",
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.4",
    "typescript": "4.6.3"
  }
}
 

my-app-type.zip

See the Pen by (@) on CodePen

[GreenSock]

It looks like you've been bitten by some unconventional React behavior which I believe was introduced in version 18 - it is discussed at length here: 

 

Basically, in development mode React is calling your useEffect() TWICE! So not only are you creating duplicate animations, but the major issue is that your .from() tweens are rendered immediately (as they should be), and then the duplicate animations use those "from" values as the end. For example, if you .from(... {opacity: 0}) when the opacity is 1, then it will work beautifully. From 0 to 1. It immediately sets the opacity to 0 and gets ready to start animating to 1...

 

... BUT now when you create the duplicate .from(...{opacity: 0}) it says "okay, let me get the CURRENT value to use as the destination..." but opacity is 0 now! So it will animate from 0 to 0 (no change). That's why it looks like things are broken. This is NOT a GSAP bug - this is incredibly frustrating (and in my opinion illogical) behavior in React. GSAP is doing what you're asking it to do. 

 

One solution could be to use a ref to bail out of the function if the animations were already created: 

let animCreated = useRef(null);

useEffect(() => {
  if (animCreated.current) {
    return; // BAIL! It was already created.
  }
  
  // animation code here...
  
  animCreated.current = true;
  
}, []);

I have no idea if that solution has other negative side effects because I'm not a React guy, but hopefully this clarifies the issue. 

 

Apparently a LOT of sites are breaking because of the new React behavior (totally unrelated to GSAP).