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!
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;