Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

037
Fading transition

In this effect, we’ll make a series of images appear using a gradient as a mask. The whole effect will be tied to the user’s scroll progress. 3, 2, 1… let’s go!

HTML Structure

We’ll set a height on the pin-height div, which determines the scroll distance needed to reveal all the images. Meanwhile, the container div will remain pinned. The images will be wrapped inside a hidden div, which is where we’ll apply our mask.

<div class="pin-height">
    <div class="container">
        <div class="images">
            <div class="hidden"><img class="media" src="./assets/medias/1.png"></div>
            <div class="hidden"><img class="media" src="./assets/medias/2.png"></div>
            <div class="hidden"><img class="media" src="./assets/medias/3.png"></div>
            ...
        </div>
    </div>
</div>

Join Made With Gsap to
unlock the full tutorial

Get access