First GreenSock Animation Project

Hello,
just wanted to share my first dabbling with gsap by creating a small 404 page with React, gsap and TailwindCSS.

Despite the current problems with React 18, I like gsap alot. You can learn the basic syntax fast and animate almost everything with a few lines, Their documentation is top notch.

And even if its not much code: refactoring tipps welcome!

404 gif 1

import React, { useEffect, useRef } from "react";
import './App.css';
import { gsap } from "gsap";

function App() {
 let tl1 = gsap.timeline();
 const animated = useRef(true);

 useEffect(() => {
   if (animated.current === true) {
     animated.current = false;
     tl1.fromTo("header", { opacity: 0 }, { y: 0, opacity: 1 }, "<")
       .fromTo("footer", { opacity: 0 }, { y: 0, opacity: 1 }, "<")
       .fromTo("h1", { y: -1000 }, { y: 0, stagger: .2, ease: "bounce.out" })
       .fromTo("h2", { x: 1000 }, { x: 0, stagger: .25, ease: "bounce.out" });
     tl1.to("h2", { y: 15, ease: "bounce.out", rotate: 5, delay: 0.5 });
   }
 }, []);

 return (
   <div className="App">
     <section className="flex justify-center items-center flex-col h-screen">
       <header className="flex justify-center">
         <div id="header" className="text-bolder text-3xl mt-4 text-zinc-100">404 Animation</div>
       </header>
       <div className="flex justify-center items-center text-[25vw] w-screen">
         <h1 id="404" className="text-zinc-100">4</h1>
         <h2 id="404" className="text-red-500 z-20">0</h2>
         <h1 id="404" className="text-zinc-100">4</h1>
       </div>
       <footer className="flex justify-center flex-col text-3xl text-center mb-3">
         <p className="text-zinc-100 text-lg">page not found</p>
         <a href="#" id="footer" className="text-zinc-100 btn">Back Home</a>
       </footer>
     </section>
   </div>
 );
}

export default App;
1 Like

you can take out the useRef and the if condition

Is the problem with the animations playing twice in dev mode fixed?

useRef is the workaround for that, just like I have to use gsap.fromTo() because gsap.From() is bugged since React 18