Reusing interactions on a series of similar components requires you to replace elements from your original interaction with elements you’re trying to animate.
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:
Learn more: About trigger settings and action targets
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.
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.
To get started, first create your custom button:
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.
Let's set the interaction in four steps:
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:
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.
Now, close the animation and do the same thing under on hover out.
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.
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.
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.).
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.
The animation for sliding this text into view has three basic parts:
In this example, however, we want to make sure that this animation only affects the element triggering the animation.
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
Something went wrong while submitting the form. Please contact email@example.com