Vanilla-Scroll Demo | Fade In

Creates a foundation with two full-height slides, each occupying 100vh of vertical space for a clean, screen-filling presentation.

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

section
{
    .content
    {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

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

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

scrolling
    .build();

Implements a dynamic entrance effect by initially hiding the second title via CSS, then gradually revealing it with a fade-in animation as the user scrolls to just before the center point.

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

section
{
    .content
    {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;

        h2
        {
            opacity: 0;
        }
    }
}

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

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

scrolling
    .addTrigger({
        name: 'First',
        trigger: container,
        steps: [
            {
                name: 'Fade In',
                element: headline,
                offset: -10,
                duration: 7,
                changes: {
                    opacity: {
                        from: 0,
                        to: 1,
                    },
                },
            },
        ],
    })
    .build();