Reuse interactions

You can apply an interaction you’ve previously created to another element on your site. This is useful when you have a repetitive design or elements with the same structure on which you’ll want to apply the same interactions.

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

1. Trigger settings — here, you can choose whether the trigger only applies to a specific element (the selected element), or all elements with the same class
2. Action targets — here, you can choose whether actions in animations affect a specific element, a class of elements, or the interaction trigger itself

Note: 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. To do so, 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. Then, go to each page, add the page trigger(s) and select the animation(s) you’ve already created.

In this lesson, we’ll walk through 2 reusable animations: 

1. How to create a button arrow move interaction
2. How to create a scroll into view interaction

How to create a button arrow move interaction

In this example, you’ll learn how to trigger the same “arrow move out” interaction on all buttons with the same class. You’ll also learn how to make sure that the animation only affects the button arrow a site visitor is currently hovering on.

How to create a custom button

To get started, you’ll first create a custom button which includes text and an arrow (i.e., what you’ll set the animation on later). You’ll need to upload an arrow image to the Assets panel to use in your button. To create the custom button:

1. Go to Add panel > Basic
2. Drag a link block onto the Webflow canvas
3. Go to Style panel > Style selector and set a class on the link block (e.g., “Button box)
4. Go to Add panel > Typography
5. Drag a text block inside the link block
6. Go to Style panel > Style selector and set a class on the text block (e.g., “Button text”)
7. Go to Assets panel
8. Drag your arrow image into the link block
9. Go to Style panel > Style selector and set a class on the arrow image (e.g., “Button arrow”)
10. Select the link block (i.e., the “Button box”)
11. Go to Style panel > Layout and set Display to Flexbox

Now you’ve created your button! You can add margin and padding, borders, a hover state, or any other styles. You can also duplicate the button for later tests that your interaction is applied to all buttons.

Pro tip: Setting classes on the custom button’s elements (i.e., the link block, text block, and arrow image) allow you to reuse interactions on other elements that have the same class applied. This is useful if you want to reuse the custom button and have the same interaction applied, for instance.

How to create the custom button interaction

Now, you can create the button arrow move interaction, so the arrow moves to the right when a site visitor hovers over the button. To create the interaction, you’ll: 

1. Create the custom button interaction trigger
2. Create the animation to move the button’s arrow on hover
3. Create the animation to reset the arrow’s position on hover out
4. Apply the trigger to all elements with the same class
5. Test the custom button

Create the custom button interaction trigger

The trigger is what starts the animation when a site visitor interacts with the button. In this case, you’ll set a mouse hover trigger, so when a site visitor hovers over the button, the animation (i.e., the arrow moving) occurs.

1. Select the link block (e.g., the “Button box”)
2. Go to Interactions panel
3. Click the “plus” icon next to Element trigger
4. Choose “Mouse hover”

Create the animation to move the button’s arrow on hover

Here, you’ll set the hover animation on the button’s arrow, so it moves slightly right when a site visitor hovers over the button.

1. Select the link box (i.e., “Button box”)
2. Click “Select an animation” next to Action in the On hover section
3. Choose “Start an animation” under Custom animation
4. Click the “plus” icon next to Timed animations
5. Name your animation (e.g., “Arrow move out”)
6. Select the button’s arrow (i.e., the “Button arrow”)
7. Click the “plus” next to Actions
8. Choose Move under Transform
9. Set a pixel value on the x-axis (e.g., 6 px) under Move
10. Adjust the easing and duration, if you’d like
11. Select “Only children with this class” next to Class
12. Click Save

Note: “Only children with this class” is applied in relation to the trigger element (i.e., the “Button box” link block) and its children with that class applied (i.e., the “Button arrow” arrow). If you don’t limit the animation to affect “only children,” every instance of the arrow on your site would move when a site visitor hovers over 1 of the custom buttons.

Since you’ve set the trigger based on the link block’s class (i.e., “Button box”) and set the animation to affect only children with the arrow’s class (i.e., “Button arrow), the interaction will affect every instance of the custom button on your site — as long as the custom button includes both the “Button box” class and the “Button arrow” class.

Create the animation to reset the arrow’s position on hover out

Now, we’ll set the hover out animation on the button’s arrow, so it moves back to its original spot when a site visitor hovers out of the button.

1. Select the link block (e.g., “Button box”)
2. Go to Interactions panel
3. Select the Mouse hover element trigger
4. Click “Select an animation” next to Action in the On hover out section
5. Choose “Start an animation” under Custom animation
6. Click the “three disclosure dots” icon next to your previously configured animation (e.g., “Arrow move out”)
7. Select Duplicate
8. Click the “cog” icon next to the duplicated animation
9. Rename the animation (e.g., “Arrow move back”)
10. Select the arrow’s Move animation on the timeline
11. Set the x-axis to 0px under Move
12. Click Save

Apply the trigger to all elements with the same class

By default, the trigger applies to the selected element (i.e., the link block), but you’ll want to change this so the trigger applies to all elements with the same class (e.g., “Button box) so the interaction occurs on all elements with that class. Then, you’ll be able to duplicate the custom button in your site and the interaction will occur on the duplicates as well.

To apply the trigger to all elements with the same class:

1. Select the link block (i.e., the “Button box”)
2. Go to Interactions panel
3. Select the Mouse hover element trigger
4. Select Class under Trigger settings

Now, the interaction applies to each element with that class (i.e., “Button box”). If you duplicate your custom button on the canvas, the duplicate button — which has the same classes applied — will have the same arrow move interaction as your original custom button.

Test the custom button

Now, you can preview your site and hover over your custom button — and any duplicates – to check that the interaction works correctly on all buttons with that class applied.

How to create a scroll into view interaction

When creating a reusable scroll animation, it’s helpful to target the trigger element itself. Here, we’ll walk through building an interaction where a site’s heading slides to the right and becomes more opaque when it scrolls into view.

To create the interaction, you’ll: 

1. Create the scroll into view trigger
2. Create the scroll into view animation
3. Set the action targets

Create the scroll into view trigger

To set up the interaction, first create a “Scroll into view” trigger on the parent element you want to animate (i.e., the div block). 

1. Select the div block – in this example, we set a “Content wrapper” class on the div block
2. Go to Interactions panel
3. Click the “plus” icon next to Element trigger
4. Select “Scroll into view”

Since you’ll want to reuse this interaction on other elements with the same class, you can apply the trigger at the class level. To do this, select Class under Trigger settings. This starts the animation every time an element with that class applied (i.e., “Content wrapper”) scrolls into view.

Create the scroll into view animation

The scroll into view interaction has 2 steps:

• Initial state — you’ll set the element’s opacity to 0% and move it 50px left
• Once scrolled into view state — you’ll set the element’s opacity to 100% and move to the x-axis origin

First, create an initial state for the div block, so that it’s 50px to the left, and 0% opacity before it scrolls into view:

1. Select the div block (e.g., “Content wrapper”)
2. Go to Interactions panel
3. Select the Scroll into view element trigger
4. Click “Select an animation” next to Action in the When scrolled into view section
5. Choose “Start an animation” under Custom animation
6. Click the “plus” icon next to Timed animations
7. Name your animation (e.g., “Content wrapper animation”)
8. Click the “plus” icon next to Actions
9. Choose Move under Transform
10. Set a pixel value on the x-axis (e.g., -50 px) under Move
11. Check the “Set as initial state” checkbox under Timing
12. Click the “plus” icon next to Actions
13. Choose Opacity under Style
14. Set a value for Opacity to (e.g., 0%)
15. Check the “Set as initial state” checkbox under Timing

Now, you’ll set the actions once the heading scrolls into view:

1. Click the “plus” icon next to Actions
2. Choose Move under Transform
3. Set a pixel value on the x-axis (e.g., 0 px) under Move
4. Uncheck the “Set as initial state” checkbox under Timing
5. Click the “plus” icon on the animation timeline next to the action you just set (i.e., the “Content wrapper” 0px Move action) — this ensure the action will occur at the same time the heading moves back to 0px on the x-axis
6. Choose Opacity under Style
7. Set a percentage value for Opacity (e.g., 100%)
8. Click Save

Now, you’ll want to make sure that the animation only affects the element triggering the animation (i.e., the “Content wrapper” div block).

Set the action targets

To set the action targets so the actions affect the interaction trigger:

1. Select the div block (e.g., “Content wrapper”)
2. Go to Interactions panel
3. Select the Scroll into view element trigger
4. Click the “cog” next to the animation you previously set (i.e., the “Content wrapper animation)
5. Select all actions in the animation timeline (hold Command (on Mac) or Control (on Windows) and click all timeline actions)
6. Select “Interaction trigger” in the Affect dropdown
7. Click Save

‍This ensures that the actions affect only the interaction trigger — instead of the specific element you selected when creating the animation. That way, you can reuse the animation and the animation will replace the action’s previous target element(s) with the trigger element of the new interaction.