The basics

You may have already seen websites that showcase slick animations and flashy transitions. When used properly, they can add a level of polish that instantly elevate the feel of the website and take it from a stale, static page to a lively and exciting one. At best, these animations and effects can also improve the user experience of the website by aiding the visitor in better understanding and navigating the site.

Typically, these animations and transitions are created by using complex JavaScript code and third-party plugins. Webflow, however, puts the power of many of these types of animations in your hands without needing to write a single line of code. It does this through its deep interaction capabilities.

In Webflow, interactions are composed of two main parts: an event or trigger usually initiated by the user (for example, a click, hover, or scroll); and a resulting animation or transformation (for example, moving, hiding, shrinking, and changing). Figure 7.1...