Recycle activities

You have the ability to use a prior activity you’ve generated on another section of your site. This is beneficial when dealing with a repetitive layout or components with identical structure where you wish to employ the same activities.

There are 2 primary controls within Webflow’s activities to assist in the reutilization of activities:

1. Trigger configurations—at this point, you can opt if the trigger solely pertains to a particular element (the chosen element), or all elements with the same classification
2. Action targets — in this case, you can determine if actions in animations affect a specific element, a group of elements, or the interaction trigger itself

Important: At present, it is not feasible to recycle page activities. You’ll be required to assign page triggers to each of your pages. Nevertheless, you can allocate the animations to target the classification of an element so you can recycle them on each page. To do this, establish the page trigger(s) on the first page and forge your animation(s). Ensure you target the classification and not the chosen element. Subsequently, navigate to each page, introduce the page trigger(s) and designate the animation(s) you’ve previously formulated.

In this tutorial, we’ll guide you through 2 reusable animations: 

1. How to formulate a button arrow shift activity
2. How to create a scroll within view activity

How to develop a button arrow shift activity

In this instance, you’ll comprehend how to initiate the same “arrow move out” activity on all buttons with the identical classification. You’ll also discover how to ensure that the animation solely influences the button arrow a site visitor is presently hovering on.

How to produce a custom button

To kick off, you’ll firstly craft a custom button that incorporates text and an arrow (i.e., what you’ll apply the animation on subsequently). You’ll need to upload an arrow image to the Assets panel to use in your button. To shape the custom button:

1. Head to Insert panel > Basic
2. Drop a link block onto the Webflow canvas
3. Navigate to Style panel > Style selector and assign a classification to the link block (e.g., “Button box)
4. Go to Insert panel > Typography
5. Add a text block within the link block
6. Proceed to Style panel > Style selector and assign a classification to the text block (e.g., “Button text”)
7. Access the Assets panel
8. Drag your arrow image into the link block
9. Navigate to Style panel > Style selector and assign a classification to the arrow image (e.g., “Button arrow”)
10. Choose the link block (i.e., the “Button box”)
11. Head to Style panel > Layout and set Display to Flexbox

Now you’ve designed your button! You can include margin and padding, borders, a hover state, or any other styles. You can also duplicate the button for subsequent tests to confirm that your activity is applied to all buttons.

Expert advice: Assigning classifications to the custom button’s components (i.e., the link block, text block, and arrow image) enable you to reuse activities on other elements that possess the same classification. This is beneficial if you wish to recycle the custom button and have the same activity employed, for instance.

How to develop the custom button activity

Now, you can establish the button arrow shift activity, so the arrow shifts to the right when a site visitor hovers over the button. To construct the activity, you’ll: 

1. Craft the custom button activity trigger
2. Establish the animation to shift the button’s arrow upon hover
3. Establish the animation to reset the arrow’s positioning when hovering out
4. Apply the trigger to all elements with the same classification
5. Evaluate the custom button

Craft the custom button activity trigger

The trigger is what institutes the animation when a site visitor interacts with the button. In this scenario, you’ll set a mouse hover trigger, so when a site visitor hovers over the button, the animation (i.e., the arrow movement) transpires.

1. Choose the link block (e.g., the “Button box”)
2. Access the Activities panel
3. Tap the “plus” icon adjacent to Element trigger
4. Select “Mouse hover”

Establish the animation to shift the button’s arrow upon hover

In this step, you’ll arrange the hover animation on the button’s arrow, so it moves slightly right when a site visitor hovers over the button.

1. Choose the link box (i.e., “Button box”)
2. Tap “Select an animation” adjacent to Action in the On hover section
3. Choose “Start an animation” under Custom animation
4. Tap the “plus” icon next to Timed animations
5. Specify a name for your animation (e.g., “Arrow move out”)
6. Select the button’s arrow (i.e., the “Button arrow”)
7. Tap 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 desired
11. Select “Only children with this classification” next to Class
12. Tap Save

Important: “Only children with this classification” is applied in reference to the trigger element (i.e., the “Button box” link block) and its children with that classification applied (i.e., the “Button arrow” arrow). If you don’t confine the animation to impact “only children,” every instance of the arrow on your site would shift when a site visitor hovers over one of the custom buttons.

Given that you’ve set the trigger based on the link block’s classification (i.e., “Button box”) and set the animation to impact only children with the arrow’s classification (i.e., “Button arrow), the activity will impact every instance of the custom button on your site — as long as the custom button encompasses both the “Button box” classification and the “Button arrow” classification.

Establish the animation to reset the arrow’s positioning on hover out

At this point, let’s configure the hover.During the hover-out transition of the button, implement an animation on the arrow to return it to its original position when the site visitor moves the cursor away from the button.

1. Choose the link block (e.g., “Button box”)
2. Navigate to the Interactions panel
3. Select the trigger element as Mouse hover
4. Click on “Select an animation” adjacent to Action in the On hover out section
5. Opt for “Start an animation” under Custom animation
6. Select the icon of “three disclosure dots” close to the existing animation (e.g., “Arrow move out”)
7. Pick Duplicate
8. Select the “cog” icon near the duplicated animation
9. Alter the animation’s name (e.g., “Arrow move back”)
10. Choose the movement animation of the arrow on the timeline
11. Adjust the x-axis to 0px under Move
12. Click Save

Extend the trigger to all elements sharing the same class

By default, the trigger only applies to the selected element (e.g., the link block), however, for a universal effect, modify the trigger to cover all elements with the same class (e.g., “Button box”), allowing the interaction to occur uniformly on all instances of that class. This approach enables duplication of the custom button across the website, ensuring uniform interaction on these duplicates as well.

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

1. Pick the link block (i.e., the “Button box”)
2. Access the Interactions panel
3. Opt for the Mouse hover element trigger
4. Choose Class in Trigger settings

The interaction will now encompass all elements sharing that class (i.e., “Button box”). Upon duplication of the custom button on the canvas, the duplicate button, inheriting the same classes, will exhibit the arrow move interaction identical to the original custom button.

Test the customized button

Verify the functionality of your site by hovering over your customized button, and any duplicates, to confirm that the interaction seamlessly applies to all buttons inheriting that class.

Creating a scroll activation interaction

While establishing a reusable scroll effect, it’s advantageous to target the trigger element itself. Here, we’ll demonstrate how to craft an interaction where a website heading slides to the right and increases opacity upon scrolling into view.

To develop this interaction, you will:

1. Establish the scroll into view trigger
2. Craft the scroll into view animation
3. Specify the action targets

Establish the scroll into view trigger

To initiate the interaction, first, set a “Scroll into view” trigger on the parent element intended for animation (i.e., the div block).

1. Pick the div block – for instance, assign a “Content wrapper” class to the div block
2. Navigate to the Interactions panel
3. Click on the “plus” icon alongside Element trigger
4. Opt for “Scroll into view”

For reusing this interaction across elements with the same class, apply the trigger at the class level. Select Class under Trigger settings to ensure the animation activates whenever an element with that class (e.g., “Content wrapper”) scrolls into view.

Craft the scroll into view animation

The scroll into view animation encompasses 2 stages:

• Initial state — position the element 50px to the left and set opacity to 0%
• Scrolled into view state — transition the element to 100% opacity and return it to the x-axis origin

Commence by defining the initial state for the div block, placing it 50px to the left and at 0% opacity before it scrolls into view:

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

Next, define the actions once the heading scrolls into view:

1. Click on the “plus” icon near Actions
2. Opt for Move under Transform
3. Specify a value for the x-axis (e.g., 0px) under Move
4. Uncheck the “Set as initial state” checkbox under Timing
5. Click on the “plus”icon on the timeline next to the action you just specified (e.g., the “Content wrapper” 0px Move action) — this will ensure that the action occurs simultaneously with the heading returning to 0px on the x-axis.
6. Opt for Opacity within Style
7. Specify a percentage value for Opacity (e.g., 100%)
8. Press Save

Now, it is necessary to ensure that the animation solely impacts the element that triggers it (e.g., the “Content wrapper” div block).

Establish the action targets

To configure the action targets so that the actions influence the interaction trigger:

1. Choose the div block (e.g., “Content wrapper”)
2. Navigate to Interactions panel
3. Pick the Scroll into view element trigger
4. Press the “cog” beside the animation previously set (e.g., the “Content wrapper animation)
5. Choose 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. Hit Save

By doing this, the actions will affect only the interaction trigger — rather than the specific element you initially chose when creating the animation. This approach allows for the reusability of the animation, replacing the previous target element(s) of the action with the trigger element of the new interaction.