{"id":6466,"date":"2024-04-14T15:26:39","date_gmt":"2024-04-14T07:26:39","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6466"},"modified":"2024-04-14T15:26:39","modified_gmt":"2024-04-14T07:26:39","slug":"scrolling-for-side-to-side-movement","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/scrolling-for-side-to-side-movement\/","title":{"rendered":"Scrolling for side-to-side movement"},"content":{"rendered":"\n
\n

Here’s what we’ll cover in this tutorial:<\/p>\n

    \n
  1. Establishing a scrolling animation<\/li>\n
  2. Including a horizontal movement<\/li>\n
  3. Implementing a transparency effect<\/li>\n
  4. Enhancing with a second step<\/li>\n<\/ol>\n

    <\/p>\n

    Establishing a scrolling animation<\/h2>\n
      \n
    1. Within the Interactions panel, select While Page is Scrolling from the On Current Page menu<\/li>\n
    2. Under the On Scroll section, opt for Play Scroll Animation<\/li>\n
    3. Hit the addition symbol beside Scroll Animations<\/li>\n
    4. Assign it a title (for instance, Hero Scroll Animation)<\/li>\n<\/ol>\n

      <\/p>\n

      Including a horizontal movement<\/h2>\n
        \n
      1. Ensure your element is chosen<\/li>\n
      2. While still in the Interactions panel, tap the addition symbol on the timeline<\/li>\n
      3. Select Move<\/li>\n
      4. For the movement, adjust the x-axis to 0 pixels<\/li>\n<\/ol>\n

        <\/p>\n

        Implementing a transparency effect<\/h2>\n
          \n
        1. Use the addition symbol to introduce another action<\/li>\n
        2. Select Opacity<\/li>\n
        3. Ensure the opacity is configured to 100%<\/li>\n<\/ol>\n

          <\/p>\n

          Proceed to apply the movement and transparency actions to each targeted element.<\/p>\n

          <\/p>\n

          Enhancing with a second step<\/h2>\n
            \n
          1. Confirm the selection of your element<\/li>\n
          2. In the interactions panel, modify the x-axis to shift the element to the left (e.g., to -900 pixels)<\/li>\n
          3. Click the addition symbol at the bottom end of the timeline for this element to append another Opacity action<\/li>\n
          4. Adjust the opacity to 0%<\/li>\n<\/ol>\n

            <\/p>\n

            Repeat this process for each element, adjusting x-axis values accordingly (e.g., 900 pixels to shift right instead of left)\u00a0<\/p>\n

            <\/p>\n

            Activate Live Preview to witness your effects in real-time.<\/p>\n

            <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Set up a page scroll animation for a continuous animation that moves and fades elements horizontally on scroll.","protected":false},"author":2,"featured_media":6467,"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":[284],"tags":[],"class_list":{"0":"post-6466","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6466","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=6466"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6466\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6467"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}