0

I'm trying to implement the animations of the following video using scroll-driven animations (scroll-driven-animations.style). I have the text part, but I am stuck with the images (the ones with numbers are images). There are four, at first only the first one is visible, and as you scroll, the next one replaces/becomes visible over the previous one, and so on.

Original (see video there)

Reduced test case

<head>
<style>
header {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
}

@keyframes text {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes image {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#media-object {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

#media-object > #media-object-col-text > * {
    display: flex;
    flex-direction: column;
    min-block-size: 25rem;
    justify-content: center;
    padding: 1em;
}

#media-object > #media-object-col-images {
    display: grid;
    grid-template-areas: "stack";
    overflow-y: clip;
    overscroll-behavior: contain;
}

#media-object > #media-object-col-images > * {
    /*grid-area: stack;*/
    position: sticky;
    inset-block-start: 0;
    background-color: Canvas;
    border: 1px solid;
}

@media (prefers-reduced-motion: no-preference) {
    #media-object > #media-object-col-text > * {
        animation: text linear forwards;
        animation-duration: 1ms; /* Firefox requires a duration for scroll-driven animations to work */
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 50%;
    }

    #media-object > #media-object-col-images > :nth-child(n + 2) {
        opacity: 0;
        animation: image linear forwards;
        animation-duration: 1ms; /* Firefox requires a duration for scroll-driven animations to work */
        animation-timeline: view();
        animation-range-start: cover 0%;
        animation-range-end: cover 100%;
    }
}

@layer support {
    *,
    ::before,
    ::after {
        box-sizing: border-box;
        margin: 0;
    }

    html {
        block-size: 100%;
    }

    body {
        margin: 0;
        min-block-size: 100%;
        font-family: system-ui, sans-serif;
    }

    header {
        padding: 2em;
        background-color: Canvas;
        border-block-end: 1px solid;
    }

    main {
        padding: 2em;
    }

    aside {
        block-size: 85svh;
        align-content: center;
    }

    section {
        border: 1px solid red;
    }

    img {
        display: block;
        max-inline-size: 100%;
    }
}

</style>
</head>
<body>
    <header>
        <p>Header</p>
    </header>
    <main>
        <h1>Scroll-Driven Animations - Reduced test case</h1>

        <aside>
            <p>Scroll down.</p>
        </aside>

        <section id="media-object">
            <div id="media-object-col-text">
                <article>
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi architecto adipisci quidem magni, temporibus iste ea nihil earum officiis a ipsa maxime iure magnam dolor vitae eveniet quia soluta?</p>
                </article>

                <article>
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi architecto adipisci quidem magni, temporibus iste ea nihil earum officiis a ipsa maxime iure magnam dolor vitae eveniet quia soluta?</p>
                </article>

                <article>
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi architecto adipisci quidem magni, temporibus iste ea nihil earum officiis a ipsa maxime iure magnam dolor vitae eveniet quia soluta?</p>
                </article>

                <article>
                    <h3>Heading</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem excepturi architecto adipisci quidem magni, temporibus iste ea nihil earum officiis a ipsa maxime iure magnam dolor vitae eveniet quia soluta?</p>
                </article>
            </div>

            <div id="media-object-col-images">
                <img src="https://placehold.co/600x400?text=1" width="600" height="400" alt="Image 1" />
                <img src="https://placehold.co/600x400?text=2" width="600" height="400" alt="Image 2" />
                <img src="https://placehold.co/600x400?text=3" width="600" height="400" alt="Image 3" />
                <img src="https://placehold.co/600x400?text=4" width="600" height="400" alt="Image 4" />
            </div>
        </section>

        <aside>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse diam quam, efficitur quis arcu cursus, commodo ultricies lacus. Donec egestas velit quis turpis ullamcorper, ac egestas quam hendrerit. Cras ac metus vestibulum enim porta faucibus. Phasellus congue blandit erat vel sodales. Maecenas tincidunt dictum libero, efficitur luctus arcu convallis id. Proin dolor lacus, elementum et blandit ut, venenatis ut risus. Aliquam erat volutpat. Etiam fringilla egestas nisi, non aliquam odio faucibus in.</p>
        </aside>
    </main>
</body>
Improve this question
Related questions
236
Play multiple CSS animations at the same time
175
Imitating a blink tag with CSS3 animations
149
Is there any way to animate an ellipsis with CSS animations?
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.