This is a high-fidelity remake of the Capsules® website, built from scratch to explore and master advanced front-end animations. This project was a month-long labor of love, focusing on replicating complex scroll-based and interactive effects using the GSAP library.
This project wasn't just about looks; it was a deep dive into animation logic. Here are some of the key features implemented:
- Preloader: A custom logo and progress bar animation to start the experience.
- Hero Text Reveal: Staggered character reveal on all main headings using
SplitText. - Stacking Cards: A complex
ScrollTriggeranimation where cards stack, scale, and fade on scroll. - Horizontal Scroll: A sticky horizontal scroll section for the "Activities" slider, complete with parallax image effects.
- Magnetic Button: A button that follows the cursor on hover (Page 5).
- Dynamic Marquees: Text marquees that change direction based on the user's scroll direction.
- Smooth Scrolling: Implemented with
Lenisfor a modern, fluid user experience. - Fully Responsive: A clean, responsive design that adapts to all screen sizes.
The animations and smooth scrolling are powered by a few key libraries:
- GSAP (GreenSock Animation Platform): The core engine for all JavaScript animations.
- ScrollTrigger: The GSAP plugin for creating all scroll-based animations.
- Lenis: For that smooth, precise scrolling feel.
- SplitText: The GSAP plugin used for the text reveal animations.
- HTML5 & CSS3: For the structure and styling.
This project uses no build tools, so you can run it easily.
- Clone the repository:
git clone [https://github.com/RaunakOnGithub/your-repo-name.git](https://github.com/RaunakOnGithub/your-repo-name.git)
- Navigate to the project directory:
cd your-repo-name - Open the
index.htmlfile in your favorite browser.
This project was a personal challenge that took over a month to complete. The main goal was to move beyond basic animations and tackle professional, complex interactions. The stacking card sequence, in particular, was a major learning experience in managing multiple ScrollTrigger timelines.
It was built with a lot of love and (many) late nights of debugging!
Hey, I'm Raunak! A web developer and Google Student Ambassador. Let's connect!
- GitHub: @RaunakOnGithub
- LinkedIn: Your LinkedIn Profile