Creating custom page scroll interactions

Sometimes, we may want to animate objects on the page as the page is being scrolled through. This effect can lend some fun depth to the page and guide the user's eye in interesting ways.

Let's build upon what we've already learned and create a custom interaction that moves images around as we're scrolling through the page. Specifically, we'll be animating the app screen images in the How it Works section.

Let's start:

1. Scroll down to the How it Works section and select the Step Image 1 element.
2. Select the Interactions tab.
3. Create a new Element trigger.
4. Select the While page is scrolling option, then add a Play scroll animation action, and then add a new scroll animation, as in Figure 7.13:

   Figure 7.13 – Adding a page-level scroll animation

   Important

   In this exercise, you may have noticed that we're using an Element trigger again and not a Page trigger. While we could have used a...