Revealing elements when they come into view during scrolling

We are using Scroll Scenes to trigger Show animations on images when they come into view. Each element can use a different reveal animation.

HTML Structure

Here we are using CSS grid on the div element. The elements could be arranged in any different way, and this approach works with any elements, not just images.

Scroll Scene

The first image has a Scroll Scene action that starts when the whole element is visible. That is also the end of the scroll scene. The duration of the scroll scene is not really important here, because:

The animation on the Scroll Scene doesn't animate the element directly. Instead, it plays the named animation Show that needs to be defined on the element. This lets us use the same Scroll Scene to play different animations on elements.

Reveal animations

Each image has an Interaction action that defines its Show animation. That lets us use different animation for each element. If all elements would use the same reveal animation, we would define the Show animation just on the first element.

Animating all images

With Apply to Many action on the first image we copy the Scroll Scene and Interaction action to all images on the page. 

Hidding the elements on start

Each element that will be revealed needs the Hide at Start action, so that it is hidden when the page loads, but only if interactions are enabled. 

Note, Hide at Start should be added to each individual element to make sure that the element is hidden immediatelly when the page loads. Apply to Many runs a bit later, so it is not recommended to rely on it for hidding elements.