An immersive, Awwwards-style pinned scrolling experience showcasing the Demon Slayer Corps.
Built with precision using GSAP ScrollTrigger and Lenis Smooth Scroll.
This project is a frontend development experiment inspired by modern Awwwards websites. It features a "card stacking" or "pinning" effect where sections layer over each other smoothly as the user scrolls.
The content is themed around Demon Slayer (Kimetsu no Yaiba), featuring the Hashiras and key characters with high-quality visuals and typography.
- Smooth Momentum Scrolling: Integrated Lenis for that buttery smooth "inertial" scroll feel.
- Pinned Section Animations: Uses GSAP ScrollTrigger to pin cards in place while the next one slides over.
- Minimalist Aesthetic: Clean typography (
DM Sans&Manrope) paired with Remix Icons. - Responsive Layout: Adapts strictly to the viewport for a focused experience.
- Structure: Semantic HTML5
- Styling: Modern CSS3 (Flexbox/Grid, Z-index management)
- Animation Library: GSAP (GreenSock) + ScrollTrigger Plugin
- Smooth Scroll: Lenis
- Icons: Remix Icon
- Fonts: DM Sans & Manrope (Google Fonts)
Developing this pinned-scroll effect came with specific technical hurdles. Here is how I solved them:
The Challenge: Making sure the upcoming card slides over the previous one, rather than pushing it up or scrolling past it.
The Solution: I used GSAP's ScrollTrigger with pin: true. By calculating the transform-origin and dynamically managing the z-index, each card acts as a "sticky" layer that holds its position until the next card completely covers it.
The Challenge: Heavy scroll animations often feel "jittery" or disconnected from the mouse wheel on standard browsers.
The Solution: I implemented Lenis. It hijacks the native scroll behavior to add momentum/inertia. The tricky part was syncing Lenis's requestAnimationFrame loop with GSAP's ScrollTrigger.update() method to ensure no lag between the scroll input and the animation frame.
The Challenge: High-quality anime artwork caused Cumulative Layout Shift (CLS) during loading.
The Solution: Used strict aspect-ratio containers and object-fit properties in CSS to reserve space for images before they load, ensuring the ScrollTrigger start/end points remain accurate.
- Clone the repository
git clone [https://github.com/your-username/demon-slayer-scroll.git](https://github.com/your-username/demon-slayer-scroll.git)