Bring Your Scroll to Life: A Beginner’s Guide to Scroll-Based Animations with GSAP

#javascript #frontend #gsap #animation

Creating smooth, engaging animations that trigger as users scroll down your page can transform a plain website into a dynamic, interactive experience.

In this post, we’ll break down how to use HTML, CSS, and JavaScript—with the help of GSAP and its ScrollTrigger plugin—to create scroll-based animations.

Allow me to show you 🙏

📌 Setting Up the Stage

I'm using a component-based framework (like Astro) along with Tailwind CSS classes and GSAP to build our animation experience. Here’s a quick overview of our file structure:

<Base>
<!-- All HTML code within base layout component -->
</Base>
<style>
/* Init CSS style */
</style>
<script>
// Where all the magic
</script>

HTML Markup:

👉 We have a base layout with a fixed background #scroll-box-bg, two SVG elements with paths for drawing animations, and five separate sections. Each section contains an <h1> element.

CSS Styling:

👉 We apply basic transformations to the <h1> elements using classes like rtlAnimation (right-to-left) and ltrAnimation (left-to-right). These classes initially offset the text, so that later in the animations, they slide into place.

JavaScript Animations:

👉 With GSAP and ScrollTrigger, we animate the SVG paths and update #scroll-box-bg backgrounds and other sections heading positions as the user scrolls.

📌 Diving Into the Code

Let’s break down the key parts of the code.

Styling the Headings:

The classes rtlAnimation and ltrAnimation use a simple CSS transform to offset the headings

section {
    h1 {
        &.rtlAnimation {
            transform: translateX(10%);
        }
        &.ltrAnimation {
            transform: translateX(-10%);
        }
    }
}

The headings are initially shifted to either the right 10% or left –10%. Later, as the scroll triggers fire, these elements animate back to their natural position translateX: '0%'.

Animating SVG Paths:

Next, we animate two SVG paths to give the effect of “drawing” on the screen as you scroll:

const firstPath = document.querySelector('path#first-path')!
firstPath.style.strokeDasharray = `${Math.round(firstPath.getTotalLength())}`
firstPath.style.strokeDashoffset = `${Math.round(firstPath.getTotalLength())}`

const firstPathTimeLine = gsap.timeline({
    scrollTrigger: {
        trigger: '#scroll-sections',
        start: 'top top',
        end: 'bottom bottom',
        scrub: true
    }
})
firstPathTimeLine.to(firstPath, {strokeDashoffset: 0, ease: Linear.easeNone})

How It Works:

Calculate Path Length: We compute the total length of the SVG path using getTotalLength().
Set Dash Properties: The strokeDasharray and strokeDashoffset properties are set so that the entire length of the path is hidden.
Animate Drawing: A GSAP timeline with a ScrollTrigger gradually reduces the strokeDashoffset from its full length to 0 as you scroll, making it look like the path is being drawn in real time.

The same steps are repeated for the second SVG path.

Animating Section Transitions:

For each of the five sections, we create a GSAP timeline that responds to scroll events:

const section1TimeLine = gsap.timeline({
    scrollTrigger: {
        trigger: '#section1',
        start: 'top center',
        end: 'bottom center',
        toggleActions: 'play pause restart reset',
        onEnter: () => { scrollBoxBg.style.backgroundColor = 'black' },
        onEnterBack: () => { scrollBoxBg.style.backgroundColor = 'black' }
    }
})
section1TimeLine.to('#section1 h1', {translateX: '0%', color: 'white', duration: 0.1, ease: 'expo'})

What Happens Here:

ScrollTrigger Settings: Each timeline is attached to a specific section (e.g., #section1). The start and end properties define when the animation should trigger (when the section is centered on the screen).
Background Color Changes: The onEnter and onEnterBack callbacks change the background color of a fixed element #scroll-box-bg to match the theme of the current section. For example, when you enter Section 1, the background turns black.
Heading Animation: The <h1> in the section animates from its offset position back to its natural position translateX: '0%' and changes color to white. This quick transition (duration of 0.1 seconds) gives an immediate visual cue that the section is active.

Each section (from 1 to 5) follows a similar pattern, with different background colors (green, blue, red, deeppink) and appropriate scroll triggers.

📌 Bringing It All Together with Full Code

By utilizing GSAP’s ScrollTrigger plugin, we can create engaging scroll-based animations with relatively simple code. Here’s a quick recap of what we did:

CSS for Initial Positioning:

We applied offset transforms to our headings so they slide into place as the user scrolls.
SVG Path Animations:

Using GSAP, we animated SVG stroke properties to create a drawing effect.
Scroll-Triggered Section Transitions:

For each section, we used GSAP timelines with ScrollTrigger to change background colors and animate text, resulting in smooth transitions as users scroll through the page.