How to use gsap.from() in react

user_14087181 0
Viewed 74

I am trying to create a stagger animation where three dots appear with a delay of 0.2s This is the code I wrote for the first dot, it is supposed to go from opacity:0 to opacity: 1 (as the default opacity of the circle is 1) but the opacity remains 0 and never changed to 1

gsap.from(circle, { duration: 0.2, opacity: 0, x: 20, ease: "Power4.easeInOut", });

gsap reactjs
1 Answers

I think it will fix

import { useLayoutEffect } from "react";
import "./App.css";
import gsap from "gsap";

function App() {
  useLayoutEffect(() => {
    let from = gsap.from(".circle", {
      duration: 1.5,
      opacity: 0,
      stagger: 0.2,
      immediateRender: false,
    });
    return () => {
      from.kill();
    };
  });

  return (
    <div className="App">
      <div className="_con">
        <div className="circle"></div>
        <div className="circle"></div>
        <div className="circle"></div>
      </div>
    </div>
  );
}

export default App;
user_177336140
Related