Summary

In this chapter, we learned the basics of how to create and customize simple animations and interactions. More broadly, we learned that all interactions consist of two things: a trigger and a resulting action or animation. Moreover, all animations require an initial state, a final state, and a way to transition between them.

We started by showing how we can create simple transitions between an element's states, specifically when hovering over it.

Then, we showed how to create some element-triggered interactions using Webflow's powerful interactions tool. We looked at how to use deliberate and subtle animations to liven up elements on the SecondPlate landing page. We learned how to add actions, how to customize them, how to relate them back to the page's scroll properties, and how to use basic easing properties to make smooth and fluid animations.

We also learned how we can reuse interactions on other elements on the page, saving us a lot of time and...