Hey Dominic, here goes.
First of all:
I gave the section a specific class name which I would recommend doing in any situation, but it is especially useful here to name the classes based on what purpose the element has. For example, the
is our scroll container, the only adjustment you need to make is change the position from
. This is so that your sticky element will be relative to the container, rather than the body.
Next, create a new div with the following properties:
I named it
, as it will be the mask that contains the slides and sticks to the browser window.
Now that your framework is set up, you create an interaction to control it.
I used the while page is scrolling animation
. I always find it easiest to use. It is somewhat difficult to see how it works because the slides all share the same class name but its pretty basic. The first slide is not affected, but at the specified keyframes the next slide transitions from 0% to 100% opacity.
I tried to keep that as short as possible, hopefully that helps!