Reusing interactions

Creating one interaction for an element on your project is a relatively straightforward problem. But what about when you want to apply the same interaction to another set of elements on your project, particularly when you have a repeating pattern of components or elements with the same structure? This is where reusing interactions comes into play.

There are two main controls in Webflow’s interactions to help you reuse interactions:

  1. Trigger settings: Choose between a trigger being tied to a specific element, or an entire class
  2. Action targets: Choose whether actions in animation affect a specific element, a class of elements, or the interaction trigger itself

Read more about trigger settings and action targets.

Below we’ll look at a couple common use cases for reusing interactions, and walk through the best way to use these trigger controls and action targets.

Example 1: Button hover interaction

Let’s say you want to create an interaction for buttons on your project that slightly moves an arrow on hover. Something like this:

‍Let’s build this interaction with an eye toward reuse.

We’d set that interaction up in three main steps:

  1. Create an “On hover” trigger for the button element
  2. Create an “On hover” animation to move the arrow slightly to the right
  3. Create an “On hover out” animation to reset the arrow to its origin

Let’s walk through those steps with an eye towards reusing the interaction across all similar buttons on the site.

Creating the trigger

Because we want this interaction to take place across our project for every button with this same class, we’ll want to use the “apply to” option and apply this interaction on the class level.

Set the trigger on the class level to have it take effect for every button of this class.
Set the trigger on the class level to have it take effect for every button of this class.

This will make it so that each button with this class triggers the animations we create.

Creating the animation

With new targeting options for actions in animation, we can specify the movement applied to this arrow to affect the class “arrow,” and limit the affected elements to the children.

Target the every arrow of the same class in this animation list, not just the specific element you’ve selected.
‍Target the every arrow of the same class in this animation list, not just the specific element you’ve selected.

Target the every arrow of the same class in this animation list, not just the specific element you’ve selected.

Note: The “only children with this class” is in relation to the trigger element. Since the arrow element is the child of the parent button element, that’s the correct option in this example. If we didn’t limit the animation to “only children,” every instance of this arrow would move when the button’s hover trigger fired.

Now that you’ve set the hover trigger to be based on the button’s class, and since you’ve targeted the arrow class in the animation list, this interaction will take effect for every instance of the button and arrow component on your project.

Learn more about trigger settings and action targets.

Example 2: Scroll into view animation

For scroll triggered animations, it’s often helpful to target the trigger element itself when creating commonly reused interactions. For example, let’s say you have an interaction that slightly scales up an element once it scrolls into view (think: headings, feature grids, etc.).

‍The example we’ll build: subheadings on a page slide to the right and appear when they scroll into view.

Creating the trigger

To create this interaction, we’ll create a scroll into view trigger on the parent element that we want to animate. And since we want to reuse this effect on the other elements on this page with the same class, we’ll use the trigger settings to apply this trigger at the class level.

‍Apply the trigger to the class to start the animation each time an element of that class scrolls into view.

Creating the animation

The animation for sliding this text into view has three basic parts:

  1. Initial state: set the element to 0% opacity and move 50px to the left
  2. Once scrolled into view: bring the opacity to 100% and move to origin on x-axis
‍The setup for creating this “slide into view” effect on the element containing the text.

In this example, however, we want to make sure that this animation only affects the element triggering the animation.

Setting the animation targets

If we left this animation as is, this specific element would animate in each time the class “content wrapper” scrolled into view. We need to narrow the focus of this animation so that only the element triggering the animation is animated.

‍Set all actions to affect only the interaction trigger — instead of the specific element selected when creating the animation.

To make this change, we’ll first select all the events in the animation, then open the “affect” dropdown and choose “Interaction trigger.” This tells the animation that for each event specified in the animation, it should be applied to the triggering element.

Learn more about action targets.