{"id":7140,"date":"2024-04-14T17:10:57","date_gmt":"2024-04-14T09:10:57","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=7140"},"modified":"2024-04-14T17:10:57","modified_gmt":"2024-04-14T09:10:57","slug":"causes-and-motion","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/causes-and-motion\/","title":{"rendered":"Causes and motion"},"content":{"rendered":"\n
\n

The Interactions toolbox<\/strong> in the Designer is where you can create simple and intricate causations using triggers and animations. An initiator \u2014 such as tapping an element or moving down the page \u2014 initiates an animation or can even animate continuously 1 or multiple elements on the page.<\/p>\n

In this tutorial, you\u2019ll understand:<\/p>\n

    \n
  1. Varying kinds of initiators<\/li>\n
  2. How to set up an initiator<\/li>\n
  3. How to configure an animation<\/li>\n
  4. About target actions<\/li>\n
  5. How to eliminate and erase unused initiators and animations<\/li>\n<\/ol>\n

    Varying kinds of initiators<\/h2>\n

    The Interactions toolbox is categorized into two main sections: Component triggers<\/strong> and Website triggers<\/strong>.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    Component triggers<\/h3>\n

    You can insert component triggers in the Component triggers<\/strong> division of the Interactions toolbox. These initiators instigate an animation when a website visitor interacts with a component \u2014 like hovering over or tapping.<\/p>\n

    To add a component trigger:<\/p>\n

      \n
    1. Choose the component (e.g., segment, button, division block, etc.) on the canvas you wish to utilize as the component trigger<\/li>\n
    2. Press the \u201cplus<\/strong>\u201d on the right of Component trigger<\/strong><\/li>\n<\/ol>\n

      Subsequently, you can select a component trigger from the compilation. Also, you can float over each option to gain more information.<\/p>\n

      The obtainable component triggers are:<\/p>\n

        \n
      • Click on mouse (tap)<\/li>\n
      • Hovering mouse<\/li>\n
      • Moving mouse over component (continuous)<\/li>\n
      • Scrolling into view<\/li>\n
      • While scrolling in view (continuous)<\/li>\n<\/ul>\n
        \n
        \"The<\/div>\n<\/figure>\n

        Notice that component triggers can animate 1 or multiple element(s) on the canvas. Put differently, a component acting as the trigger doesn\u2019t always need to be the target of an action \u2014 it can be the trigger that animates a distinct<\/em> component. For example, you can designate a button component as the trigger component which, when tapped, causes an image component to rotate in a circle.<\/p>\n

        Unique component triggers<\/h4>\n

        You can also append custom animations for when website visitors interact with navigation bars, drop-downs, tabs, and sliders. You can reach these trigger varieties when you pick the corresponding component (e.g., navbar, drop-down, etc.) on the canvas.<\/p>\n

          \n
        • Navbar opens \u2014 Select the Navbar <\/strong>in the Navbar<\/strong> component. The animation activates when the navbar menu opens\/closes<\/li>\n
        • Dropdown opens \u2014 Select the Dropdown <\/strong>in the Dropdown<\/strong> component. The animation activates when the drop-down menu opens\/closes<\/li>\n
        • Tab change \u2014 Pick the tab link<\/strong> inside the Tabs<\/strong> component. The animation activates when the tab link is visible (active) or invisible (inactive)<\/li>\n
        • Slider change \u2014 Pick 1 of the slides<\/strong> in a Slider <\/strong>component. The animation activates when a slider slide comes into view or goes out of view<\/li>\n<\/ul>\n
          \n
          <\/div>
          When you click the navbar component on the canvas, then the Navbar opens trigger becomes visible in the Component trigger menu.<\/figcaption><\/figure>\n

          Website triggers<\/h3>\n

          You can insert component triggers in the Component triggers<\/strong> section of the Interactions toolbox. These triggers commence an animation when there\u2019s a change in the website state \u2014 such as when the website loads.<\/p>\n

          To add a website trigger, press the \u201cplus<\/strong>\u201d on the right of Website trigger<\/strong>.<\/p>\n

          The website triggers are:<\/p>\n

            \n
          • Moving mouse in viewport (continuous)<\/li>\n
          • Whilst website is scrolling (continuous)<\/li>\n
          • Website load<\/li>\n
          • Website scrolled<\/li>\n<\/ul>\n
            \n
            <\/div>\n<\/figure>\n

            How to set up an initiator<\/h2>\n

            After you pick the sort of initiator in the Interactions toolbox, you can define the action you wish to occur after the initiator. The action choices you possess rely on the kind of initiator you have selected. For example, if you select the \u201cMouse click (tap)\u201d component trigger, you can select the actions that occur on 1st and 2nd tap.<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            Initiator configurations<\/h3>\n

            By default, when you designate an initiator on a component, the interaction solely transpires when you interact with that specific component. The interaction will occur on all<\/em> device breakpoints.<\/p>\n

            \n
            \n
            \"The<\/figure>\n

            How to prompt an animation on specific breakpoints<\/h4>\n

            If you wish to initiate an animation on certain breakpoints, you can verify the breakpoints where you desire the animation to take place. By default, an animation triggers on all breakpoints (Desktop and higher, tablet, phone landscape, and phone portrait).<\/p>\n

            For instance, this can be beneficial in case you want mouse click interactions to happen exclusively on Desktop and above breakpoints. In that scenario, visitors will be capable of activating the interaction with their mouse.<\/p>\n

            \"All<\/figure>\n

            How to initiate an animation on all elements with an identical class<\/h4>\n

            If you opt to commence an animation on all elements sharing the same class, you can implement an interaction on one element with that class, subsequently apply it to the entire class.<\/p>\n

            To establish an animation on all elements with that class:<\/p>\n

              \n
            1. Set an animation on an element<\/li>\n
            2. Proceed to Trigger settings<\/strong> and pick Class<\/strong><\/li>\n
            3. Opt for the class you intend to apply the animation on from the Class<\/strong> dropdown<\/li>\n<\/ol>\n

              Discover more about reusing interactions.\u00a0<\/strong><\/p>\n

              \"The<\/figure>\n

              Additional animation configurations<\/h3>\n

              Scroll offset<\/h4>\n

              For numerous page scrolling triggers (e.g., \u201cScroll into view,\u201d \u201cWhile scrolling in view (continuous),\u201d etc.), you can opt to set an offset<\/strong>. This postpones the initiation of the interaction until it reaches a certain scroll percentage of the page \u2014 the greater your scroll offset, the longer a visitor scrolls before the interaction commences.<\/p>\n

              Delay<\/h4>\n

              You have the ability to define an animation delay<\/strong>, causing the animation to take place only after the assigned time delay has elapsed.<\/p>\n

              Smoothing<\/h4>\n

              You can also modify the smoothing<\/strong> of an animation. Smoothing dictates the pace at which the animation responds to mouse movement.<\/p>\n

              How to configure an animation<\/h2>\n

              To configure an animation based on the trigger you’ve just set up, you can generate a custom animation<\/strong> or select a pre-existing animation (e.g., fade, shrink, jello, etc.).<\/p>\n

              How to set a pre-existing animation<\/h3>\n

              Pre-existing animations encompass the appear & disappear<\/strong> and emphasis <\/strong>animations that come pre-configured in the Designer. These can be chosen as a speedier alternative to building each component of an animation individually.<\/p>\n

              Note:<\/strong> Pre-existing animations can solely be established for element triggers \u2014 not page triggers.<\/h6>\n

              To configure a pre-existing animation:<\/p>\n

                \n
              1. Initiate an Element trigger<\/strong> (e.g., mouse hover, scroll into view, etc.)<\/li>\n
              2. Unfold the Action<\/strong> dropdown from the beginning action segment (e.g., if you chose the mouse hover element trigger, you\u2019d unveil the Action<\/strong> dropdown from the On hover<\/strong> segment)<\/li>\n
              3. Opt for an action from either the Appear & disappear<\/strong> category or the Emphasis <\/strong>category<\/li>\n<\/ol>\n

                Subsequently, you can customize the direction and delay for Appear & disappear<\/strong> animations, or the direction for Emphasis<\/strong> animations.<\/p>\n

                How to configure a custom animation<\/h3>\n

                To configure a custom animation:<\/p>\n

                  \n
                1. Establish an Element trigger<\/strong> (e.g., mouse hover, scroll into view, etc.) or Page trigger<\/strong> (e.g., Page load, page scrolled, etc.)<\/li>\n
                2. Unveil the Action<\/strong> dropdown from the initial action section (e.g., if you chose the mouse hover element trigger, you\u2019d expose the Action<\/strong> dropdown from the On hover<\/strong> segment)<\/li>\n
                3. Click \u201cInitiate an animation\u201d beneath Custom animation<\/strong><\/li>\n
                4. Click the \u201cplus<\/strong>\u201d adjacent to Timed animations<\/strong><\/li>\n
                5. Name<\/strong> your animation atop the Interactions panel<\/li>\n
                6. Press the \u201cplus<\/strong>\u201d on the right of Actions<\/strong><\/li>\n
                7. Opt for a Global variables, Transform<\/strong>, Style<\/strong>, or Miscellaneous<\/strong> animation from the dropdown<\/li>\n<\/ol>\n

                  Following this, you’ll fine-tune the timing of the animation in the animation timeline<\/strong>.<\/p>\n

                  How to operate the animation timeline<\/h3>\n

                  Whether you’re creating a new animation or amending an existing animation, the animation timeline is where you can employ keyframes to animate various elements.<\/p>\n

                  To append an action to the animation timeline, initially navigate to the animation timeline<\/strong>. Subsequently, you can add an action in one of two methods:<\/p>\n

                    \n
                  • Tap the \u201cplus<\/strong>\u201d icon atop the timeline<\/li>\n
                  • Click the \u201cplus<\/strong>\u201d icon within the timeline prior to, on, amid, or post existing actions to insert actions inline<\/li>\n<\/ul>\n

                    Illustration<\/h4>\n

                    For example, let\u2019s construct an animation for the \u201cWhile page is scrolling\u201d page trigger. As you scroll down the page, you can make your hero section text move horizontally and decrease in opacity. The green playhead in the animation timeline indicates the current position of the page (0% \u2013 100%).<\/p>\n

                    \"The<\/figure>\n

                    Timed animations frequently utilize other triggers (milliseconds, seconds, etc.) but this instance employs percentages to signify the page\u2019s present scroll position. Here, 0% denotes a scroll position at the top of the page, and 100% denotes a scroll position at the bottom of the page.\u00a0<\/p>\n

                    Now, you can integrate various actions at different points.on the page. For example, you could include 4 procedures at 0% scroll position:<\/p>\n

                      \n
                    • Text background \u2014 Shift 0px<\/li>\n
                    • Text background \u2014 Transparency 100% (fullyvisible)<\/li>\n
                    • Text foreground \u2014 Shift 0px<\/li>\n
                    • Text foreground \u2014 Transparency 100%<\/li>\n<\/ul>\n

                      These steps position the Text background and text foreground at 0px (no movement) and set their transparency to 100% (fully visible). When a visitor reaches the top of the page, the text background and foreground will be completely visible and remain in their original places.<\/p>\n

                      \n
                      \"The<\/div>\n<\/figure>\n

                      You can also introduce 4 methods at 100% scroll position:<\/p>\n

                        \n
                      • Text background \u2014 Shift 900px<\/li>\n
                      • Text background \u2014 Transparency 0% (completely see-through)<\/li>\n
                      • Text foreground \u2014 Shift 900px<\/li>\n
                      • Text foreground \u2014 Transparency 0%<\/li>\n<\/ul>\n

                        In this instance, each element is shifted by 900px in any direction, and the transparency is set to 0%. Let’s review our final actions for the scrolling animation:<\/p>\n

                        These steps adjust the position of the Text background and text foreground to 900px (shifting 900px either way) and set their transparency to 0% (fully see-through). When a visitor reaches the bottom of the page, the text background and foreground will be completely transparent and shifted 900px from their original positions to the right or left of the page.<\/p>\n

                        Pro tip:<\/strong> Two techniques exist for selecting multiple actions on the animation timeline. To pick multiple consecutive<\/em> actions, press and hold Shift<\/strong> and select those actions. To select multiple, non-consecutive<\/em> actions, press Command<\/strong> (on Mac) or Control<\/strong> (on Windows) and choose the actions.<\/h6>\n

                        Regarding action targets<\/h2>\n

                        By default, each action you add to your animation timeline influences the chosen element. Yet, you can modify the focus of an action in one of two ways:<\/p>\n

                          \n
                        • Substitute the target element affected by the action<\/li>\n
                        • Determine whether the action influences solely the chosen element, all elements sharing the same category, or the interaction trigger itself<\/li>\n<\/ul>\n

                          Modifying the target element<\/h4>\n

                          To modify the element impacted by an action:<\/p>\n

                            \n
                          1. Right-click an action in the animation timeline<\/li>\n
                          2. Click Change target<\/strong><\/li>\n
                          3. Select a different element on the canvas to apply the action to<\/li>\n<\/ol>\n

                            Important:<\/strong> Any modifications within the animation timeline will affect all interactions that activate the animation sequence.<\/p><\/blockquote>\n

                            \n
                            \"The<\/div>\n<\/figure>\n

                            Determining how the action affects the single element, category of the element, or the interaction trigger<\/h4>\n

                            Once you create an action, you can select whether this action affects:<\/p>\n

                              \n
                            • Only<\/em> the chosen element<\/li>\n
                            • All elements sharing the same category as the chosen element<\/li>\n
                            • The interaction trigger itself<\/li>\n<\/ul>\n

                              Targeting solely the chosen element<\/h4>\n

                              The chosen element is the standard target for any animation action you form. Any action set to influence the chosen element will steadily<\/em> impact that precise element. As a result, if you reutilize an animation with an action influencing the chosen element, the action will impact that element consistently, irrespective of the triggering element.<\/p>\n

                              \n
                              \"The<\/div>\n<\/figure>\n
                              \n
                              \"The<\/div>\n<\/figure>\n

                              Targeting all elements with the same category as the chosen element<\/h4>\n

                              You may also prefer to target the category<\/strong> of the chosen element. This will cause the animation action to influence all elements sharing the identical category as the chosen element.<\/p>\n

                              This choice proves helpful when you want several elements to shift in parallel when the page loads. To accomplish this, assign the same category to all elements and use combo categories to shift them to different positions on the page. Subsequently, you can utilize the same animation action on the base category, allowing each element to shift similarly, but from distinct initial positions.<\/p>\n

                              You can also confine the affected elements to only children, siblings, or parents sharing the same category as the interaction trigger.<\/p>\n

                              Targeting children, siblings, or parents sharing the same category as the chosen element<\/h5>\n

                              You can define which classes are affected by an action by specifying whether they are children, siblings, or parents of the trigger element.<\/p>\n

                              This option can prove useful, like when you desire all arrows within button elements sharing the same category to animate on hover. If you integrate the animation action to all elements with the same category, on hovering over 1 button, you’ll observe that all arrows within every button on that page animate. To restrict the animation action to the button being hovered over at that moment, access the Affect<\/strong> menu and opt for \u201cCategory.\u201d Subsequently, select the Category<\/strong> from the dropdown and opt for \u201cOnly children with this category.\u201d<\/p>\n

                              The \u201cOnly siblings with this class\u201d choice serves well when the element you aim to animate is a sibling of your trigger element, like a menu dropdown or a popup modal. Equally, you can utilize the \u201cOnly parents with this category\u201d alternative when the element subjected to animation is the parent of your trigger element.<\/p>\n

                              Note:<\/strong> Ensure you attribute a category to your element(s) before forming class-based animation. The \u201ccategory\u201d choice won’tbe ready for actions applied to elements that do not contain a specific class.<\/h6>\n
                              \n
                              \"The<\/div>\n<\/figure>\n
                              \n
                              \"The<\/div>\n<\/figure>\n

                              Strategies for targeting the Trigger of Interaction<\/h4>\n

                              You may also establish operations that uniquely<\/em> impact the Trigger of Interaction<\/strong>. Subsequently, for any subsequent interaction where you reuse the animation, the animation will substitute the previous target element(s) with the trigger element of the new interaction. This facilitates the swift application of the same animation to any element without necessitating the creation of fresh animations.<\/p>\n

                              Comment:<\/strong> The option for the \u201cTrigger of Interaction\u201d is solely accessible when an operation is executed on the trigger element of the interaction. Consequently, this choice is not offered in animations prompted by a Page trigger.<\/h6>\n
                              \n
                              \"The<\/div>\n<\/figure>\n

                              Modifying an active animation<\/h3>\n

                              You can modify an existing animation by navigating to the Interactions panel and selecting the animation to unveil its configurations. Consequently, hover over the title of the animation and tap on the settings icon \u201ccog<\/strong>\u201d situated to the right of the animation’s title. This action will disclose the animation timeline for that specific animation.<\/p>\n

                              \n
                              \"The<\/div>\n<\/figure>\n

                              Alternative sources<\/h3>\n
                                \n
                              • Expand your knowledge about adopting interactions<\/li>\n
                              • Delve into interpolation, easing, and smoothing<\/li>\n
                              • Learn the process for setting a continual animation that shifts and fades elements horizontally as you scroll<\/li>\n<\/ul>\n

                                Eliminating and discarding unutilized triggers and animations<\/h2>\n

                                Procedure for erasing triggers and animations<\/h3>\n

                                From the Interactions panel, it is possible to eliminate triggers or animations. By doing so, the trigger or animation will no longer be linked to its specific target element or page action. To eradicate a trigger or animation:<\/p>\n

                                  \n
                                1. Proceed to the Interactions panel<\/strong><\/li>\n
                                2. Hover over the animation or trigger you wish to delete<\/li>\n
                                3. Select the \u201ctrash<\/strong>\u201d icon adjacent to the trigger name<\/li>\n<\/ol>\n
                                  Remark:<\/strong> When you delete a trigger from the Interactions panel, the animation, which was previously connected to it, is not deleted. It merely detaches the animation from that particular trigger. Subsequently, you can still avail the animation when configuring new triggers.<\/h6>\n

                                  Process for eliminating triggers and animations from your website<\/h3>\n

                                  If an animation is removed, or a trigger lacking a connected animation is deleted from the Interactions panel, it does not entirely eradicate the trigger or animation from your site<\/em>. This is due to the possibility of reusing previously created animations on alternative element or page triggers. Nonetheless, you might consider cleaning up unutilized triggers or animations for enhanced site optimization and improved performance.\u00a0<\/p>\n

                                  While clearing unutilized interactions, you may not have the capacity to select which triggers are eliminated, but you can decide which animations to retain or discard. All unused triggers get erased during the cleanup process of unutilized interactions.<\/p>\n

                                  Tip:<\/strong> The option to fully remove (clean up) an animation is solely possible when the animation is not linked to an element or page trigger. Initially, remove the animation from any element or page triggers in the Interaction panel, then proceed to eliminate the animation from your website.<\/h6>\n

                                  To wipe out unutilized triggers and animations:<\/p>\n

                                    \n
                                  1. Access the Interactions panel<\/strong><\/li>\n
                                  2. Press Clean up<\/strong> located at the top of the panel<\/li>\n
                                  3. Determine the animations you intend to discard\/retain<\/li>\n
                                  4. Click on Delete<\/strong><\/li>\n<\/ol>\n
                                    \n
                                    \"The<\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Triggers and animations are the two primary aspects of any interaction.","protected":false},"author":2,"featured_media":7141,"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-7140","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\/7140","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=7140"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/7140\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/7141"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=7140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=7140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=7140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}