{"id":6891,"date":"2024-04-14T18:00:10","date_gmt":"2024-04-14T10:00:10","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6891"},"modified":"2024-04-14T18:00:10","modified_gmt":"2024-04-14T10:00:10","slug":"recycle-activities","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/recycle-activities\/","title":{"rendered":"Recycle activities"},"content":{"rendered":"\n
\n

You have the ability to use a prior activity you\u2019ve 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.<\/p>\n

There are 2 primary controls within Webflow\u2019s activities to assist in the reutilization of activities:<\/p>\n

    \n
  1. Trigger configurations<\/strong>\u2014at this point, you can opt if the trigger solely pertains to a particular element (the chosen element), or all elements with the same classification<\/li>\n
  2. Action targets<\/strong> \u2014 in this case, you can determine if actions in animations affect a specific element, a group of elements, or the interaction trigger itself<\/li>\n<\/ol>\n
    Important: <\/strong>At present, it is not feasible to recycle page activities. You\u2019ll 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.<\/h6>\n

    In this tutorial, we\u2019ll guide you through 2 reusable animations:\u00a0<\/p>\n

      \n
    1. How to formulate a button arrow shift activity<\/li>\n
    2. How to create a scroll within view activity<\/li>\n<\/ol>\n

      How to develop a button arrow shift activity<\/h2>\n

      In this instance, you\u2019ll comprehend how to initiate the same \u201carrow move out\u201d activity on all buttons with the identical classification. You\u2019ll also discover how to ensure that the animation solely influences the button arrow a site visitor is presently hovering on.<\/p>\n

      How to produce a custom button<\/h3>\n

      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:<\/p>\n

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

        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.<\/p>\n

        Expert advice:<\/strong> Assigning classifications to the custom button\u2019s 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.<\/h6>\n

        How to develop the custom button activity<\/h3>\n

        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\u2019ll:\u00a0<\/p>\n

          \n
        1. Craft the custom button activity trigger<\/li>\n
        2. Establish the animation to shift the button\u2019s arrow upon hover<\/li>\n
        3. Establish the animation to reset the arrow\u2019s positioning when hovering out<\/li>\n
        4. Apply the trigger to all elements with the same classification<\/li>\n
        5. Evaluate the custom button<\/li>\n<\/ol>\n

          Craft the custom button activity trigger<\/h4>\n

          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.<\/p>\n

            \n
          1. Choose the link block (e.g., the \u201cButton box\u201d)<\/li>\n
          2. Access the Activities panel<\/strong><\/li>\n
          3. Tap the \u201cplus<\/strong>\u201d icon adjacent to Element trigger<\/strong><\/li>\n
          4. Select \u201cMouse hover\u201d<\/li>\n<\/ol>\n

            Establish the animation to shift the button\u2019s arrow upon hover<\/h4>\n

            In this step, you’ll arrange the hover animation on the button\u2019s arrow, so it moves slightly right when a site visitor hovers over the button.<\/p>\n

              \n
            1. Choose the link box (i.e., \u201cButton box\u201d)<\/li>\n
            2. Tap \u201cSelect an animation\u201d adjacent to Action<\/strong> in the On hover<\/strong> section<\/li>\n
            3. Choose \u201cStart an animation\u201d under Custom animation<\/strong><\/li>\n
            4. Tap the \u201cplus<\/strong>\u201d icon next to Timed animations<\/strong><\/li>\n
            5. Specify a name for your animation (e.g., \u201cArrow move out\u201d)<\/li>\n
            6. Select the button\u2019s arrow (i.e., the \u201cButton arrow\u201d)<\/li>\n
            7. Tap the \u201cplus<\/strong>\u201d next to Actions<\/strong><\/li>\n
            8. Choose Move<\/strong> under Transform<\/strong><\/li>\n
            9. Set a pixel value on the x-axis (e.g., 6 px) under Move<\/strong><\/li>\n
            10. Adjust the easing and duration, if desired<\/li>\n
            11. Select \u201cOnly children with this classification\u201d next to Class<\/strong><\/li>\n
            12. Tap Save<\/strong><\/li>\n<\/ol>\n
              Important:<\/strong> \u201cOnly children with this classification\u201d is applied in reference to the trigger element (i.e., the \u201cButton box\u201d link block) and its children with that classification applied (i.e., the \u201cButton arrow\u201d arrow). If you don\u2019t confine the animation to impact \u201conly children,\u201d every instance of the arrow on your site would shift when a site visitor hovers over one of the custom buttons.<\/h6>\n

              Given that you’ve set the trigger based on the link block\u2019s classification (i.e., \u201cButton box\u201d) and set the animation to impact only children with the arrow\u2019s classification (i.e., \u201cButton arrow), the activity will impact every instance of the custom button on your site \u2014 as long as the custom button encompasses both the \u201cButton box\u201d classification and the \u201cButton arrow\u201d classification.<\/p>\n

              \n
              <\/div>
              The activity timeline exhibits an \u201cArrow move out\u201d animation with a 0.2 second duration \u201cIn Out Cubic\u201d easing applied. The animation is configured to affect \u201cOnly children with this classification\u201d for the \u201cButton arrow\u201d instance classification.<\/figcaption><\/figure>\n

              Establish the animation to reset the arrow\u2019s positioning on hover out<\/h4>\n

              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.<\/p>\n

                \n
              1. Choose the link block (e.g., \u201cButton box\u201d)<\/li>\n
              2. Navigate to the Interactions panel<\/strong><\/li>\n
              3. Select the trigger element as Mouse hover<\/strong><\/li>\n
              4. Click on \u201cSelect an animation\u201d adjacent to Action<\/strong> in the On hover out<\/strong> section<\/li>\n
              5. Opt for \u201cStart an animation\u201d under Custom animation<\/strong><\/li>\n
              6. Select the icon of \u201cthree disclosure dots<\/strong>\u201d close to the existing animation (e.g., \u201cArrow move out\u201d)<\/li>\n
              7. Pick Duplicate<\/strong><\/li>\n
              8. Select the \u201ccog<\/strong>\u201d icon near the duplicated animation<\/li>\n
              9. Alter<\/strong> the animation’s name (e.g., \u201cArrow move back\u201d)<\/li>\n
              10. Choose the movement animation of the arrow on the timeline<\/li>\n
              11. Adjust the x-axis to 0px under Move<\/strong><\/li>\n
              12. Click Save<\/strong><\/li>\n<\/ol>\n
                \n
                <\/div>
                The animation timeline displays an \u201cArrow move back\u201d animation with a 0.2 second duration \u201cIn Out Cubic\u201d easing applied. The animation is set to affect \u201cOnly children with this class\u201d for the \u201cButton arrow\u201d example class.<\/figcaption><\/figure>\n

                Extend the trigger to all elements sharing the same class<\/h4>\n

                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., \u201cButton box\u201d), 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.<\/p>\n

                To broaden the trigger to all elements with the same class:<\/p>\n

                  \n
                1. Pick the link block (i.e., the \u201cButton box\u201d)<\/li>\n
                2. Access the Interactions panel<\/strong><\/li>\n
                3. Opt for the Mouse hover<\/strong> element trigger<\/li>\n
                4. Choose Class<\/strong> in Trigger settings<\/strong><\/li>\n<\/ol>\n

                  The interaction will now encompass all elements sharing that class (i.e., \u201cButton box\u201d). 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.<\/p>\n

                  \n
                  <\/div>
                  The interaction is set to trigger on all elements with the same \u201cButton box\u201d example class.<\/figcaption><\/figure>\n

                  Test the customized button<\/h4>\n

                  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.<\/p>\n

                  Creating a scroll activation interaction<\/h2>\n

                  While establishing a reusable scroll effect, it\u2019s 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.<\/p>\n

                  To develop this interaction, you will:<\/p>\n

                    \n
                  1. Establish the scroll into view trigger<\/li>\n
                  2. Craft the scroll into view animation<\/li>\n
                  3. Specify the action targets<\/li>\n<\/ol>\n

                    Establish the scroll into view trigger<\/h3>\n

                    To initiate the interaction, first, set a \u201cScroll into view\u201d trigger on the parent element intended for animation (i.e., the div block).<\/p>\n

                      \n
                    1. Pick the div block \u2013 for instance, assign a \u201cContent wrapper\u201d class to the div block<\/li>\n
                    2. Navigate to the Interactions panel<\/strong><\/li>\n
                    3. Click on the \u201cplus<\/strong>\u201d icon alongside Element trigger<\/strong><\/li>\n
                    4. Opt for \u201cScroll into view\u201d<\/li>\n<\/ol>\n

                      For reusing this interaction across elements with the same class, apply the trigger at the class level. Select Class<\/strong> under Trigger settings<\/strong> to ensure the animation activates whenever an element with that class (e.g., \u201cContent wrapper\u201d) scrolls into view.<\/p>\n

                      Craft the scroll into view animation<\/h3>\n

                      The scroll into view animation encompasses 2 stages:<\/p>\n

                        \n
                      • Initial state<\/strong> \u2014 position the element 50px to the left and set opacity to 0%<\/li>\n
                      • Scrolled into view<\/strong> state \u2014 transition the element to 100% opacity and return it to the x-axis origin<\/li>\n<\/ul>\n

                        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:<\/p>\n

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

                          Next, define the actions once the heading scrolls into view:<\/p>\n

                            \n
                          1. Click on the \u201cplus<\/strong>\u201d icon near Actions<\/strong><\/li>\n
                          2. Opt for Move<\/strong> under Transform<\/strong><\/li>\n
                          3. Specify a value for the x-axis (e.g., 0px) under Move<\/strong><\/li>\n
                          4. Uncheck the \u201cSet as initial state\u201d checkbox under Timing<\/strong><\/li>\n
                          5. Click on the \u201cplus<\/strong>\u201dicon on the timeline next to the action you just specified (e.g., the \u201cContent wrapper\u201d 0px Move<\/strong> action) \u2014 this will ensure that the action occurs simultaneously with the heading returning to 0px on the x-axis.<\/li>\n
                          6. Opt for Opacity<\/strong> within Style<\/strong><\/li>\n
                          7. Specify a percentage value for Opacity <\/strong>(e.g., 100%)<\/li>\n
                          8. Press Save<\/strong><\/li>\n<\/ol>\n
                            \n
                            <\/div>
                            The timeline for animation presents a \u201cContent wrapper animation\u201d with 2 Section heading \u201cMove\u201d actions and 2 Section heading \u201cOpacity\u201d actions.<\/figcaption><\/figure>\n

                            Now, it is necessary to ensure that the animation solely impacts the element that triggers it (e.g., the \u201cContent wrapper\u201d div block).<\/p>\n

                            Establish the action targets<\/h3>\n

                            To configure the action targets so that the actions influence the interaction trigger:<\/p>\n

                              \n
                            1. Choose the div block (e.g., \u201cContent wrapper\u201d)<\/li>\n
                            2. Navigate to Interactions panel<\/strong><\/li>\n
                            3. Pick the Scroll into view <\/strong>element trigger<\/li>\n
                            4. Press the \u201ccog<\/strong>\u201d beside the animation previously set (e.g., the \u201cContent wrapper animation)<\/li>\n
                            5. Choose all actions in the animation timeline (hold Command<\/strong> (on Mac) or Control<\/strong> (on Windows) and click all timeline actions)<\/li>\n
                            6. Select \u201cInteraction trigger\u201d in the Affect <\/strong>dropdown<\/li>\n
                            7. Hit Save<\/strong><\/li>\n<\/ol>\n

                              By doing this, the actions will affect only the interaction trigger \u2014 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.<\/p>\n

                              \n
                              <\/div>
                              The animation timeline highlights a \u201cContent wrapper animation\u201d with all actions chosen. The \u201cAffect\u201d dropdown is set to \u201cInteraction trigger.\u201d<\/figcaption><\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Learn how to reuse interactions.","protected":false},"author":2,"featured_media":6892,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-6891","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6891"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6891\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6892"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}