Traditional Engagements 1.0

This write-up showcases the vintage interface for Engagements, which you can enable in the Architect by toggling the switch at the apex of the Engagements section. For insights into the latest approach using the advanced Engagements 2.0 panel, refer to our refreshed tutorial on this subject.

Overview of Engagements

Engagements breathe vitality into websites. With Webflow, you can promptly and effortlessly craft personalized engagements that animate, amplify, revolve elements, and much more. You can also adjust an element’s width, height, transparency, or its display characteristics.

Framework of an engagement

Each website interaction consists of two components: triggers and stages. Triggers dictate to the browser “when” to execute an engagement. Stages are the visual modifications that occur after the Trigger.

Cause

The primary setup when developing an Engagement is a cause. Depending on the intricacy of your Engagement, you can have one cause or several. And with eight diverse cause categories at your disposal, your options for interactivity are limitless.

Here are the eight causes you can utilize:

• Page Load: when the webpage completes loading
• Click: when an element is clicked
• Hover: when an element is passed over by a cursor
• Scroll: when an element scrolls in and/or out of view
• Tabs: when a tab opens and/or closes
• Slider: when a slider comes in and/or out of view
• Navbar: when a navigation menu opens and/or closes
• Dropdown: when a drop-down menu opens and/or closes

Cause settings

You can personalize your causes with the following configurations:

• ‍Influence other elements: Set one element as a cause to influence other elements with a specific category
• Restrict to nested elements: Set a parental element as a trigger to influence a child element
• Restrict to sibling elements: Set a sibling element as a trigger to influence another sibling
• Loop: Consecutively repeat an engagement

Stages

Immediately after a cause is triggered, your stages will run consecutively from uppermost to lowermost. You can chain together numerous stages to generate breathtaking animations.

Here are the stages you can utilize in Webflow:

• ‍Move: Displace an element to a new position on the page
• Scale: Magnify or diminish an element
• Rotate: Spin an element
• Width & Height: Adjust an element’s width and/or height property
• Opacity: Increase or decrease an element’s transparency
• Display: Alter an element’s display property (e.g., inline to none)
• Wait: Insert time between stages

Initial presentation

An element’s initial presentation defines how it appears before an engagement influences it.

Configuring an element’s initial presentation lets you keep constructing your site while within the Architect and execute visual modifications only when someone visits your published site.

Formulating engagements

To devise an engagement using engagements 1.0:

1. Select the element you wish to engage with
2. Go to the Engagements Panel (H) on the right side
3. Click the + symbol

Identify your engagement

Name your engagement descriptively so that you can effortlessly locate it later. Here are several commendable titles for a singular engagement:

• ‍Fade In Logo on Page Load
• Logo: Fade In on Page Load
• On Page Load: Fade In Logo

If you are not cautious with your titles, you might struggle to find the appropriate one, overwrite other engagements, or unintentionally delete engagements.

Cause

Causes define the user actions that trigger an engagement. The most prevalent causes are Click and Hover, yet Webflow provides 8 distinct causes. Dedicate some time to exploring each, and you will unearth exhilarating new methods for users to engage with your site.

To specify your cause:

1. Click Include Cause
2. Select the cause that aligns with your requirements

Stages

Stages represent the various stages of visual change that constitute an engagement. They present you a thrilling way to enrich your website’s user experience with visually striking effects and animations.

Each stage runs autonomously from top to bottom, but every property alteration in a single stage transpires simultaneously.

Activate load engagement 1.0

The Load Trigger will initiate your engagement when the page loads. Consequently, it is advisable to apply the load trigger solely to elements that are within view when the page loads (for instance, in the prominent image at the summit of your page).

Creating a synchronized load effect

A common scenario for the load trigger is to distribute the timing of various element interactions so that they enter the page at different intervals. This is what we term as creating a Synchronized Load Engagement (Take note of the example above).

To achieve this, you must stagger the timing of each trigger occurrence by introducing a Wait stage before any animations occur. Utilizing a Wait stage enables you to integrate a specific time period during which no animations will transpire. To foster a synchronized effect, simply prolong the waiting time of each element sequentially in the sequence you desire them to appear.

Optimal practices for load trigger interactions

When utilizing the load trigger, it is crucial to consider the placement of the element to which you are attaching the interaction. Since the load trigger activates when the page loads, it is advisable to apply it to elements positioned at the top of the page to ensure the user witnesses the interaction.

If you affix a load trigger to an element located lower on the page, users may miss the interaction occurrence (as it unfolds beneath the monitor’s viewpoint).

Scroll engagement 1.0

A scroll-triggered engagement is one that unfurls as you scroll up and down your site. This engagement enables you to tailor both the Into View and Out of View states, integrating personalized effects to each. The option to designate an Offset also affords you the flexibility to determine where on the screen the scroll triggers the animation to happen.

Into view and out of view

When dealing with scroll triggers, you possess the capability to introduce effects both when your object enters Into View and when the object exits Out of View. To correlate the trigger locations appropriately, you must append an Offset for the top and/or bottom.

Into view

The Into View feature authorizes you to incorporate an effect (or a series of effects) when the objectbecomes apparent as you scroll through the page. Consider this as the primary impact for the element you are implementing a scroll interaction for.

Unseen

The Unseen attribute is where you can incorporate animations to the element as they move out of sight (i.e. after the user has passed them while scrolling down the page). It is helpful to start from an offset above.

Offsets

Lower margin

For Appearance, you pick a Lower Margin, indicating the percentage distance from the bottom of the page where you want your object to execute its scroll interaction.

Upper margin

For Unseen, you choose an Upper Margin, which is the percentage distance from the top where you want the object to display its effect. Once the user has scrolled completely past the object, the same margin percentage used here will serve as the default Out of View offset value when the user scrolls back up.

Necessity to be aware of – No scrolling on mobile (iOS only)

It appears that our scroll functions do not operate on specific mobile devices. This is a restriction unique to iOS (iPhone, iPad, iPod). Even with the latest devices, Apple does not grant developers the authority to execute scripts while the browser is in motion. For more details, please consult the Apple developer library. Once Apple allows this for developers, we will gladly reintroduce scroll functions!

Click initiation interaction 1.0

The click initiation permits you to introduce an interaction when someone clicks on a button, link, or other interactive elements. 

When configuring a click interaction, you can specify various effects for the first and subsequent clicks.

Frequent scenarios

Frequently, the click interaction is utilized to impact another element on the page. In the example above, the interaction is actually applied to the Button, not to the concealed text area. The Button simply employs an interaction that influences a distinct element on the page (e.g., the Hidden Text Box).

Utilizing a second click

Second clicks generally reverse the initial click impact, acting as a toggle. Consider it as opening a box (first click) and then closing the box (second click). 

Hover initiation interaction 1.0

Hover initiation interactions allow you to define different effects when you hover over an element and move the cursor away from it.

Typical use scenarios

• Display an icon upon hovering over a button
• Animate an icon when hovering over a button
• Show information about an image when the cursor hovers over it

Tab initiation interaction 1.0

A Tabs Interaction enables you to include a Tab-triggered interaction for both when a tab is open (selected) and closed (deselected). 

This presents an array of creative and interactive possibilities that can be implemented not only on your Tab Links but on other elements of your page as well. Here is a Tab component example that encompass multiple Interactions.

Integrating Interactions with Tab Links

The Tab Links serve as the triggers to switch between your various Tab Panes (i.e., the content within your tab). Implementing interactions can result in unique effects when the user clicks on a tab link and then clicks away from it.

Explore the examples below and proceed with the steps to replicate them.

PHASE 1

Initially, we need to design the tabs accordingly and introduce an Arrow Icon. The above Tab Links were styled by adjusting these Style Attributes:

• ‍Width: The width of these Tab Links was changed to 23%
• Margin Right: For spacing on the sides of the tabs, a Margin of 2%was included on the Right of the Tab Link.
• Increase Padding: The default Padding was modified on the Top and Bottom to be 13px each.
• Fill Color: The Fill Color was altered to a light gray (#c0ccd1), while the Current Tab Link was assigned a Fill Color of Blue (#3496de).
• We also assigned a Class to the Arrow Icon and implemented the following CSS Properties.
• Position: To position the icon at the bottom of the Tab Link, we adjusted the Position toAbsolute. Using the Absolute Position tool, we located it at the bottom.
• Margin Auto: To center the icon, we set both Right and Left Margins toAuto.

PHASE 2

Next is to integrate the Interactions! Start by clicking on the Tab Link (a non-current Tab Link), then navigate to the Interactions 1.0 panel. Here, you’ll establish a new Interaction.

PHASE 3

The Initial Appearance should be left empty, so the subsequent step is to specify a Trigger. Here, choose a Tabs Trigger.

PHASE 4

To enact the Interaction, replicate what’s shown in the image below. Note there are two Interactions for both the Tab Open (triggered by clicking the tab) and the Tab Close (triggered by clicking a different tab). That sums it up!

PHASE 5

Now, set up a distinct Interaction for the Arrow Icons. Simply click on the arrow Icon and go through Step 2 again. This time, you’ll include an Initial Appearance in this interaction. For this scenario, opt to move the Arrow Icon up by 6px and set an opacity of 0%.

PHASE 6

Repeat Step 3 and select the Tab Trigger. The remaining steps for the Arrow Icon interaction will follow accordingly. You’re finished! Ensure to integrate the Interactions with all your Tab Links and Arrow Icons.

Slider initiation interaction 1.0

The slider interaction enables you to incorporate an animation onto an element within a slider container. 

Navbar initiation interaction 1.0

The navbar interaction enables you to include an interaction on an element within a navigation component.

‍

This post showcases the previous interface for Interactions, which you can activate in the Designer by utilizing the switch at the top of the Interactions panel. To view the relevant article utilizing the new Interactions 2.0 panel, refer to our refreshed course on this subject.