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

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.