GSAP Web is a stunning scroll-driven website powered by React, GSAP, and Tailwind CSS — delivering smooth, cinematic animations and immersive motion design.
From SplitText animations to scroll-synced videos, this project showcases the power of GSAP’s ScrollTrigger and timeline control to create a storytelling web experience that feels alive.
This project demonstrates advanced animation techniques like pinned sections, scroll-based parallax, custom animated carousels, and image masking effects, all while maintaining a responsive and modern UI.
| Technology | Description |
|---|---|
| GSAP (GreenSock Animation Platform) | The core of the magic ✨ — used for SplitText reveals, ScrollTrigger effects, parallax scrolling, scroll-synced videos, and timeline animations. |
| React.js | Provides the component-based structure for modular UI, seamless GSAP integration, and reusable scroll logic. |
| Tailwind CSS | Utility-first CSS framework enabling rapid and responsive UI design directly within JSX. |
| Vite | Ultra-fast build tool offering instant HMR, minimal configuration, and blazing-fast production builds. |
✅ SplitText Animations — Create cinematic text reveals and impactful section intros.
✅ ScrollTrigger Effects — Control animations with scroll-based triggers and timelines.
✅ Parallax Scrolling — Add immersive depth through responsive motion layers.
✅ Pinned Sections — Lock content in view during animation playback.
✅ Scroll-Synced Video — Sync video progress with scroll position for storytelling.
✅ Image Masking Effects — Achieve creative transitions with scroll-pinned masks.
✅ Animated Carousel — A fully custom GSAP-powered carousel with fluid transitions.
✅ Seamless Timelines — Coordinate animations across multiple sections smoothly.
✅ Responsive UI — All animations and layouts adapt beautifully across devices.
🎥 A perfect playground for mastering scroll-driven web design.
Follow these steps to run the project locally 👇
Make sure you have the following installed:
git clone https://github.com/Anas2604-web/gsap_web.git
cd gsap_web
3️⃣ Install Dependencies
bash
Copy code
npm install
4️⃣ Start the Development Server
bash
Copy code
npm run dev