Vanilla-Scroll Demo | Sticky

Complex sticky content example Back

Basic Sticky Container

View Fullscreen

Creates a sticky container with 150vh height to provide a scrolling space of 50vh, establishing the foundation for scroll-based animations.

index.html

<section
    class="intro container"
    id="intro-container"
>
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>

style.css

section
{
    width: 100vw;
    height: 150vh;

    .content
    {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
}

script.js

import VanillaScroll from '@spomsoree/vanilla-scroll';

const scrolling = new VanillaScroll({ debug: true });

scrolling
    .build();

Sticky Container with Trigger

View Fullscreen

Implements a scroll trigger mechanism that detects when the user scrolls to specific points, without yet applying any visual steps.

index.html

<section
    class="intro container"
    id="intro-container"
>
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>

style.css

section
{
    width: 100vw;
    height: 150vh;

    .content
    {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
}

script.js

import VanillaScroll from '@spomsoree/vanilla-scroll';

const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');

scrolling
    .addTrigger({
        name: 'Intro',
        trigger: container,
    })
    .build();

Headline Animation Step

View Fullscreen

Adds the first animation step: scaling up the headline gradually as the user scrolls.

index.html

<section
    class="intro container"
    id="intro-container"
>
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>

style.css

section
{
    width: 100vw;
    height: 150vh;

    .content
    {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
}

script.js

import VanillaScroll from '@spomsoree/vanilla-scroll';

const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const headline = document.querySelector('h1');

scrolling
    .addTrigger({
        name: 'Intro',
        trigger: container,
        steps: [
            {
                name: 'Scale up',
                element: headline,
                offset: 0,
                duration: 10,
                changes: {
                    transform: {
                        from: 'scale(1)',
                        to: 'scale(20)',
                    },
                },
            },
        ],
    })
    .build();

Blur Effect Integration

View Fullscreen

Incorporates a second animation step: progressively adding a blur effect to background elements.

index.html

<section
    class="intro container"
    id="intro-container"
>
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>

style.css

section
{
    width: 100vw;
    height: 150vh;

    .content
    {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
}

script.js

import VanillaScroll from '@spomsoree/vanilla-scroll';

const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const headline = document.querySelector('h1');

scrolling
    .addTrigger({
        name: 'Intro',
        trigger: container,
        steps: [
            {
                name: 'Scale up',
                element: headline,
                offset: 0,
                duration: 10,
                changes: {
                    transform: {
                        from: 'scale(1)',
                        to: 'scale(20)',
                    },
                },
            },
            {
                name: 'Blur',
                element: headline,
                offset: 3,
                duration: 10,
                changes: {
                    filter: {
                        from: 'blur(0px)',
                        to: 'blur(10px)',
                    },
                },
            },
        ],
    })
    .build();

Complete Intro Transition

View Fullscreen

Finalizes the intro animation sequence by controlling opacity levels, creating a smooth fade-out effect as the user continues scrolling.

index.html

<section
    class="intro container"
    id="intro-container"
>
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>

style.css

section
{
    width: 100vw;
    height: 150vh;

    .content
    {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
}

script.js

import VanillaScroll from '@spomsoree/vanilla-scroll';

const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const headline = document.querySelector('h1');

scrolling
    .addTrigger({
        name: 'Intro',
        trigger: container,
        steps: [
            {
                name: 'Scale up',
                element: headline,
                offset: 0,
                duration: 10,
                changes: {
                    transform: {
                        from: 'scale(1)',
                        to: 'scale(20)',
                    },
                },
            },
            {
                name: 'Blur',
                element: headline,
                offset: 3,
                duration: 10,
                changes: {
                    filter: {
                        from: 'blur(0px)',
                        to: 'blur(10px)',
                    },
                },
            },
            {
                name: 'Fade out',
                element: headline,
                offset: 8,
                duration: 8,
                changes: {
                    opacity: {
                        from: 1,
                        to: 0,
                    },
                },
            },
        ],
    })
    .build();

Escalation

View Fullscreen

index.html

<section
    class="intro container"
    id="intro-container"
>
    <div class="content">
        <h1>Intro</h1>
    </div>
</section>
<section
    class="example container"
    id="example1-container"
>
    <div class="content">
        <h2 id="example1-title">Example 1</h2>
    </div>
</section>
<section
    class="example container"
    id="example2-container"
>
    <div class="content">
        <h2 id="example2-title">Example 2</h2>
    </div>
</section>
<section
    class="example container"
    id="example3-container"
>
    <div class="content">
        <h2 id="example3-title">Example 3</h2>
    </div>
</section>

style.css

section
{
    width: 100vw;
    height: 150vh;

    &:first-of-type,
    &:last-of-type
    {
        height: 120vh;
    }

    &.example
    {
        margin-top: -100vh;
    }

    .content
    {
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    h2
    {
        opacity: 0;
        transition: color .2s linear,
                    background-color .2s linear;

        &.active
        {
            color: #fff;
            background-color: #f0f;
        }
    }
}

script.js

import VanillaScroll from '@spomsoree/vanilla-scroll';

const scrolling = new VanillaScroll({ debug: true });
const container = document.getElementById('intro-container');
const container1 = document.getElementById('example1-container');
const container2 = document.getElementById('example2-container');
const container3 = document.getElementById('example3-container');
const headline = document.querySelector('h1');
const example1 = document.getElementById('example1-title');
const example2 = document.getElementById('example2-title');
const example3 = document.getElementById('example3-title');

scrolling
    .addTrigger({
        name: 'Intro',
        trigger: container,
        steps: [
            {
                name: 'Scale up',
                element: headline,
                offset: 0,
                duration: 10,
                changes: {
                    transform: {
                        from: 'scale(1)',
                        to: 'scale(20)',
                    },
                },
            },
            {
                name: 'Blur',
                element: headline,
                offset: 3,
                duration: 10,
                changes: {
                    filter: {
                        from: 'blur(0px)',
                        to: 'blur(10px)',
                    },
                },
            },
            {
                name: 'Fade out',
                element: headline,
                offset: 8,
                duration: 8,
                changes: {
                    opacity: {
                        from: 1,
                        to: 0,
                    },
                },
            },
        ],
    })
    .addTrigger({
        name: 'Example 1',
        trigger: container1,
        steps: [
            {
                name: 'Fade In',
                element: example1,
                offset: 0,
                duration: 20,
                changes: {
                    opacity: {
                        from: 0,
                        to: 1,
                    },
                },
            },
            {
                name: 'Active',
                element: example1,
                offset: 20,
                duration: 20,
                onEnter: (event) => {
                    event.detail.element.classList.add('active');
                },
                onExit: (event) => {
                    event.detail.element.classList.remove('active');
                },
            },
            {
                name: 'Fade out',
                element: example1,
                offset: 40,
                duration: 20,
                changes: {
                    opacity: {
                        from: 1,
                        to: 0,
                    },
                },
            },
        ],
    })
    .addTrigger({
        name: 'Example 2',
        trigger: container2,
        steps: [
            {
                name: 'Appear',
                element: example2,
                offset: -10,
                duration: 20,
                changes: {
                    opacity: {
                        from: 0,
                        to: 1,
                    },
                },
            },
            {
                name: 'Disappear',
                element: example2,
                offset: 30,
                duration: 10,
                changes: {
                    opacity: {
                        from: 1,
                        to: 0,
                    },
                },
            },
        ],
    })
    .addTrigger({
        name: 'Example 3',
        trigger: container3,
        steps: [
            {
                name: 'Rotate',
                element: example3,
                offset: -10,
                duration: 10,
                changes: {
                    transform: {
                        from: 'rotate(0deg)',
                        to: 'rotate(-360deg)',
                    },
                },
            },
            {
                name: 'Appear',
                element: example3,
                offset: -10,
                duration: 20,
                changes: {
                    opacity: {
                        from: 0,
                        to: .5,
                    },
                },
            },
            {
                name: 'Appear 2',
                element: example3,
                offset: 10,
                duration: 7,
                changes: {
                    opacity: {
                        from: .5,
                        to: 1,
                    },
                },
            },
        ],
    })
    .build();