Parallax Scroll Animation

This project is a multi-scene SVG parallax scrolling animation built using GSAP and ScrollTrigger. As the user scrolls, different landscape elements move at varying speeds to create depth and realism. The animation transitions smoothly between day, sunset, and night scenes. Complex SVG graphics such as hills, clouds, birds, bats, stars, and gradients are animated in sync with scrolling. Overall, the project demonstrates advanced scroll-based storytelling and motion design using modern frontend tools.

HTML

The HTML file acts as the structural foundation for the entire animation. A single SVG element contains all visual components such as backgrounds, hills, clouds, animals, and stars. These elements are grouped and identified using unique IDs so they can be animated individually. Gradient definitions are placed inside <defs> to create dynamic sky and lighting effects.

Each scene is layered carefully to support parallax depth. A tall .scrollElement div is used to generate scroll distance for triggering animations. No visual text or images are placed outside the SVG. This clean structure allows JavaScript to control everything through transforms. Overall, HTML provides a semantic and animation-ready layout.

CSS

svg {
    position: fixed;
    width: 100%;
    height: 100vh;
}

The CSS fixes the SVG to the viewport so it remains visible during scrolling. The scrolling illusion is created not by moving the page, but by animating SVG elements internally. A large scroll container creates enough vertical space to drive ScrollTrigger animations. Buttons and UI elements are positioned using fixed layouts so they remain accessible.

Typography and fonts are kept simple to avoid distracting from the animation. Z-index values ensure proper layering between the SVG, UI, and scroll area. Media queries adjust scaling for mobile devices. The background remains clean to highlight SVG visuals. Overall, CSS supports layout stability and responsiveness.

JavaScript

ScrollTrigger.create({
    animation: scene1,
    scrub: 3
});

JavaScript powers the animation logic using GSAP and its ScrollTrigger plugin. Multiple timelines are created to represent different scenes of the animation. Each timeline animates specific SVG elements based on scroll position. Parallax depth is achieved by moving distant elements slower than foreground elements. Gradients dynamically change to simulate sun movement and lighting transitions. Characters like birds and bats animate in and out at precise scroll ranges. Scene transitions smoothly push older layers out while introducing new ones. ScrollTrigger synchronizes animation progress with user scrolling. Reusable timelines keep the code organized and scalable. Overall, JavaScript orchestrates a cinematic scroll-based experience.

Download Code