Reuse 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 whether the trigger only applies to a specific element (the selected element), or elements with a specific class
2. Action targets — choose whether actions in animations affect a specific element, a class of elements, or the interaction trigger itself

Learn more: About trigger settings and action targets

Before you get started

At the moment, it's not possible to reuse page interactions. You'll need to apply page triggers on each of your pages. However, you can set the animations to target the class of an element so you can reuse them on each page.

1. Set the page trigger(s) on the first page and create your animation(s). Make sure you target the class and not the selected element.
2. Go to each page, add the page trigger(s) and select the animation(s) you've already created.

In this lesson

In this lesson, you're going to learn how to trigger the same interaction on all buttons with the same class, and how you can ensure that the animation will only affect the arrow nested in the button you're hovering on.

Getting started

To get started, first create your custom button:

1. Drop a link block onto your canvas. Inside this link block, drop a text block and an arrow (an image from the asset manager.)
2. Add a class to each of these elements so you can style them. These classes will also allow you to reuse interactions. 

In our example in the video, we've created the "Button box" class to style the link block. We've changed the display setting to flex, added margins and paddings, borders, and even a hover state. You can style your custom button the way you like.

We've also duplicated the link block so we can test that our interaction is applied to all buttons and is functioning correctly.

Creating the interaction

Let's set the interaction in four steps:

1. Create the trigger — an “On hover” trigger for the button
2. Create the animation to move the arrow on hover
3. Create the animation to move the arrow back on hover out
4. Apply the trigger to all elements with the same class as the button

Create the trigger

1. Select the link block
2. Over in the interactions panel, select the trigger: mouse hover.

Create the animation to move the arrow on hover

With targeting options for actions in animation, we can specify the movement applied to this arrow to affect the class of the arrow and limit the affected elements to the children. First, let's create the animation:

1. Create a new animation and name it
2. Select the button arrow, add an animation action (move), then move the arrow along the x-axis so that when hovering over the button, the arrow moves to the right.
3. Adjust the easing and the duration if you'd like.
4. Choose to affect the class. To be more specific, choose to affect "only children with this class". 

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.

Create the animation to move the arrow back

Now, close the animation and do the same thing under on hover out.

1. Under the interactions panel → on hover out section, duplicate the animation you created in the previous step.
2. Edit the duplicate animation and rename it
3. Since the animation is already built, all you have to do is reset the value — change the x-position back to zero.
4. Close out the animation

Apply the trigger to all elements with the same class

In the interactions panel → trigger settings section, you'll see that by default this trigger is applied to the selected element —  the original link block (button). To apply this same interaction to all buttons with this same class as the original link block, choose to affect the class instead of the element. Now each button element (each link block with that class) will trigger this animation.

Testing

Go to preview mode and hover over each button to check that you've set the animation correctly, and that you're getting the effect you want.

Other examples

• Reveal elements on scroll

Yet another example: 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.).

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.

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

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.

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.

Leanr more: About action targets