Introduction to Engagements

Use interactions to make your site more dynamic and engaging.

Throughout the various periods, the internet and digital gadgets have evolved to be receptive and potent. As creators and programmers, we have the opportunity to utilize resources that enable us to construct intricate interactions and remarkable animations.

An illustration of animation displaying the Hero title’s skew modification during page loading.

Typically, these resources are frequently fashioned with highly specified JavaScript libraries, demanding tools and plugins complete with disagreements, peculiarities, and challenging code-oriented learning curves.

Within the Webflow Designer, we have the ability to access all the tools necessary to handle this content with exceedingly detailed management — by creating interactions graphically.

Witness some impressive instances. Notice: This content showcases flickering lights and animations that may impact individuals with visual sensitivities.

The Element trigger menu is expanded in the Interactions panel.
The Page trigger menu is expanded in the Interactions panel.

What defines an engagement?

Interactions empower us to design around 2 robust entities: stimuli and animations (e.g., if this occurs then that unfolds).

A stimulus (e.g., a tap, scroll, hover, cursor movement, page load, etc.) triggers an animation (what transpires on that stimulus).

Icons illustrating the triggers “click,” “scroll,” “hover,” “cursor movement,” and “page load.”

Having such precise authority, we can enforce timed animations, scroll animations, and location-based cursor animations in whichever manner we prefer, granting us the capability to fabricate everything we desire.

Commence by discovering further about stimuli and animations.

Ewan Mak
Latest posts by Ewan Mak (see all)