Live Site: puzzle-bar.vercel.app
GitHub Repository: Coded-Adil/Drink-gsap
Puzzle Bar is a visually engaging web animation project built using GSAP (GreenSock Animation Platform).
The main goal was to explore how smooth, timeline-based animations work in modern front-end development — from element transitions to scroll-triggered effects.
This project was inspired by the GSAP tutorial by @AW1yfBKRMKc, which helped me understand how to combine JavaScript animation logic with clean CSS structure to create an interactive and modern landing page.
Working on this project taught me a lot about animation fundamentals and performance optimization in front-end development.
Here’s a breakdown of what I learned:
- 🔹 GSAP Basics — Understanding
gsap.to(),gsap.from(), andgsap.timeline()for animation sequencing. - 🔹 ScrollTrigger — Triggering animations based on scroll position and creating dynamic user experiences.
- 🔹 Element Targeting — How to select and animate multiple elements efficiently.
- 🔹 Timing & Easing — Fine-tuning motion curves and animation delays for smoother transitions.
- 🔹 Project Deployment — Deploying a static GSAP-based project to Vercel directly from GitHub.
- 🔹 Code Structure — Organizing animation code cleanly to avoid conflicts and ensure readability.
- HTML5
- CSS3
- JavaScript (ES6)
- GSAP (GreenSock Animation Platform)
- Vercel for deployment
| Challenge | How I Solved It |
|---|---|
| GSAP animations not triggering as expected | Carefully reviewed element selectors and timing inside the GSAP timeline. Learned to debug animation order and refresh ScrollTrigger. |
| Page layout breaking during animation | Adjusted CSS positioning (using relative/absolute) and made sure transform origins matched the intended direction of motion. |
| Deploying updates to Vercel | Connected my GitHub repo to Vercel and learned that pushing updates to the main branch automatically redeploys the live site. |
| Animation performance issues on scroll | Optimized DOM elements and avoided redundant triggers by grouping related animations into timelines. |
- GSAP provides more control over animations than CSS transitions.
- Combining ScrollTrigger and timelines opens endless creative possibilities.
- Smooth animation depends heavily on DOM structure and layer organization.
- Continuous iteration and debugging are part of every front-end developer’s workflow.
Developed by: Adil Rahman
A passionate front-end developer from Bangladesh, currently focusing on React.js, GSAP animations, and modern UI/UX design.
⭐ If you like this project, feel free to star the repository or connect with me for collaboration!