Simple element-triggered animations

You will recall that the Hero section of the SecondPlate landing page contains some introductory text, download buttons, and a couple of attractive screenshots of the app, as seen in Figure 7.10:

Figure 7.10 – The SecondPlate landing page – Hero section

We've already added subtle hover effects on the buttons, but we can take this a step further. A common animation seen on landing pages is a subtle fade-in or move-in transition for the elements on the page. When done with restraint, they can add a nice welcoming touch. Subtle movements can also indicate to users a sense of momentum that invites them to explore further.

In our case, let's add a simple effect where the content in the Hero section slides in once the page loads.

Let's explore how we can achieve this:

1. Select the Container element in the Hero section.
2. Access the Interactions tab to the right of the screen.
3. Click...