GSAP animation from one react component is breaking the starting animation of the main page once I import it

[mateosalinasm]

The animation that I have in my About component changes the opacity of the text as you scroll down the page, but since I added it to my Home page its breaking the animation I have set up. Its supposed to move the text from x: '-10%' to x:0 but its not working. It only appears staggered because I set the opacity from 0 to 1, but the movement part of it is broken.  These are both components:

 

import React, { useState, useEffect, useRef } from "react";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

import "./home.css";

import About from "../components/About";

import Skills from "../components/Skills";

 

const Home = () => {

useEffect(() => {

const tl = gsap.timeline();

 

tl.fromTo(".name", { opacity: 0 }, { opacity: 1, duration: 2 })

.fromTo(

".where, .creativity, .meets",

{ opacity: 0, x: "-10%" },

{ opacity: 1, x: "0%", stagger: 0.5 }

)

.fromTo(

".where, .creativity, .meets",

{ x: "-100%" },

{ x: "0%", duration: 1, ease: "power1.out" }

)

}, []);

 

return (

<div>

<section id="home" className="h-screen mb-10">

<div

id="hero-text"

className="flex-col flex justify-center -mt-24 h-screen"

>

<div className="text-mute-beige tracking-tighter font-bold text-5xl justify-center flex flex-col items-center px-24 -z-10">

<div className="">

<h1 className="relative text-sm font-extralight tracking-widest mb-2 name">

MATEO SALINAS

</h1>

<div>

<h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left where">

WHERE

</h1>

<div>

<h1 className="text-amber-500 max-w-2xl font-extrabold text-8xl leading-24 text-left creativity">

CREATIVITY

</h1>

</div>

 

<h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left meets">

MEETS CODE

</h1>

</div>

</div>

</div>

</div>

</section>

<section id="about">

<About />

</section>

<section id="skills">

<Skills />

</section>

<section id="projects"></section>

<section id="contact"></section>

</div>

);

};

 

export default Home;



 

 

 

 

 

 

import { React, useEffect } from "react";

import { gsap } from "gsap";

import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

import "./about.css";

 

const About = () => {

useEffect(() => {

const text = document.querySelector(".text-to-animate");

const words = text.textContent.split(" ");

text.textContent = "";

 

words.forEach((word) => {

const wordSpan = document.createElement("span");

wordSpan.className =

word === "frontend" || word === "developer" ? "colored-word" : "";

const letters = word.split("");

letters.forEach((letter) => {

const letterSpan = document.createElement("span");

letterSpan.textContent = letter;

wordSpan.appendChild(letterSpan);

});

wordSpan.innerHTML += " "; // add back the space after the word

text.appendChild(wordSpan);

});

 

const tl = gsap.timeline({

scrollTrigger: {

trigger: ".text-to-animate",

start: "top 80%",

end: "bottom 40%",

scrub: true,

// markers: true,

},

});

 

// Animate text opacity change

gsap.utils.toArray(".text-to-animate span span").forEach((letter, i) => {

tl.fromTo(

letter,

{

opacity: 0.2,

duration: 0.4,

},

{

opacity: 1,

duration: 0.4,

ease: "none",

},

i * 0.1

);

});

}, []);

 

return (

<div>

<div className="text-mute-beige tracking-tighter font-bold text-5xl ml-20 h-screen flex content-around flex-col px-24 justify-center items-center">

<div className="flex flex-col justify-start max-w-6xl">

<p

id="about"

className="relative text-sm font-extralight tracking-widest mb-2"

>

ABOUT ME

</p>

<div className="font-extrabold text-5xl max-w-6xl leading-16 text-left mb-10 text-to-animate">

<h1>I'm a passionate </h1>

<h1 className="text-amber-500">frontend developer</h1>

<h1>

{" "}

dedicated to crafting visually captivating applications that not

only provide effective solutions but also spark joy and

inspiration.

</h1>

</div>

</div>

</div>

</div>

);

};

 

export default About;

 

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://greensock.com/react

Happy tweening!

[mateosalinasm]

Hi, thank you for your response. Unfortunately, this didn't fix my issue. It actually made the first animation flicker a little bit. The text is still not moving on any axis, it only appears. I think I implemented your suggestion correctly, please let me know if I missed something.

 

import React, { useState, useEffect, useRef, useLayoutEffect } from "react";

import { gsap } from "gsap";

import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

import "./home.css";

import About from "../components/About";

import Skills from "../components/Skills";

 

const Home = () => {

useLayoutEffect(() => {

let ctx = gsap.context(() => {

const tl = gsap.timeline();

 

tl.fromTo(".name", { opacity: 0 }, { opacity: 1, duration: 2 })

.fromTo(

".where, .creativity, .meets",

{ opacity: 0, x: "-10%" },

{ opacity: 1, x: "0%", stagger: 0.5 }

)

.fromTo(

".where, .creativity, .meets",

{ x: "-100%" },

{ x: "0%", duration: 1, ease: "power1.out" }

)

});

return () => ctx.revert();

}, []);

 

return (

<div>

<section id="home" className="h-screen mb-10">

<div

id="hero-text"

className="flex-col flex justify-center -mt-24 h-screen"

>

<div className="text-mute-beige tracking-tighter font-bold text-5xl justify-center flex flex-col items-center px-24 -z-10">

<div className="">

<h1 className="relative text-sm font-extralight tracking-widest mb-2 name">

MATEO SALINAS

</h1>

<div>

<h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left where">

WHERE

</h1>

<div>

<h1 className="text-amber-500 max-w-2xl font-extrabold text-8xl leading-24 text-left creativity">

CREATIVITY

</h1>

</div>

 

<h1 className="max-w-2xl font-extrabold text-8xl leading-24 text-left meets">

MEETS CODE

</h1>

</div>

</div>

</div>

</div>

</section>

<section id="about">

<About />

</section>

<section id="skills">

<Skills />

</section>

<section id="projects"></section>

<section id="contact"></section>

</div>

);

};

 

export default Home;


 

import { React, useEffect, useLayoutEffect } from "react";

import { gsap } from "gsap";

import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

import "./about.css";

 

const About = () => {

useLayoutEffect(() => {

let ctx = gsap.context(() => {

 

const text = document.querySelector(".text-to-animate");

const words = text.textContent.split(" ");

text.textContent = "";

 

words.forEach((word) => {

const wordSpan = document.createElement("span");

wordSpan.className =

word === "frontend" || word === "developer" ? "colored-word" : "";

const letters = word.split("");

letters.forEach((letter) => {

const letterSpan = document.createElement("span");

letterSpan.textContent = letter;

wordSpan.appendChild(letterSpan);

});

wordSpan.innerHTML += " "; // add back the space after the word

text.appendChild(wordSpan);

});

 

const tl = gsap.timeline({

scrollTrigger: {

trigger: ".text-to-animate",

start: "top 80%",

end: "bottom 40%",

scrub: true,

// markers: true,

},

});

 

// Animate text opacity change

gsap.utils.toArray(".text-to-animate span span").forEach((letter, i) => {

tl.fromTo(

letter,

{

opacity: 0.2,

duration: 0.4,

},

{

opacity: 1,

duration: 0.4,

ease: "none",

},

i * 0.1

);

});

});

return () => ctx.revert();

}, []);

 

return (

<div>

<div className="text-mute-beige tracking-tighter font-bold text-5xl ml-20 h-screen flex content-around flex-col px-24 justify-center items-center">

<div className="flex flex-col justify-start max-w-6xl">

<p

id="about"

className="relative text-sm font-extralight tracking-widest mb-2"

>

ABOUT ME

</p>

<div className="font-extrabold text-5xl max-w-6xl leading-16 text-left mb-10 text-to-animate">

<h1>I'm a passionate </h1>

<h1 className="text-amber-500">frontend developer</h1>

<h1>

{" "}

dedicated to crafting visually captivating applications that not

only provide effective solutions but also spark joy and

inspiration.

</h1>

</div>

</div>

</div>

</div>

);

};

 

export default About;

[GSAP Helper]

First of all, are you using GSAP 3.12.2?

 

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 Stackblitz 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 React starter template you can fork.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.