{"id":2290,"date":"2023-08-13T13:24:00","date_gmt":"2023-08-13T10:24:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=2290"},"modified":"2024-01-14T14:13:04","modified_gmt":"2024-01-14T12:13:04","slug":"scrolling-effects-horizontal-scroll","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/","title":{"rendered":"Scrolling Effects \u2013 Horizontal Scroll"},"content":{"rendered":"\n

The Horizontal Scroll effect moves elements right and left when the visitor scrolls the page up and down accordingly.<\/p>\n\n\n\n

For example, a section with a heading title that moves to the right when the visitor scrolls down, and back to the left when the visitor scrolls back up.<\/p>\n\n\n\n

You can move multiple elements independently, at different rates of speed.<\/p>\n\n\n\n

Follow these steps:<\/p>\n\n\n\n

    \n
  1. Login to WP admin.<\/li>\n\n\n\n
  2. Edit the image where you want to apply motion effect. The Edit Image<\/strong> panel shows on the left.<\/li>\n\n\n\n
  3. Click Advance > Motion Effects<\/strong>.<\/li>\n\n\n\n
  4. Toggle Scrolling Effects<\/strong>.<\/li>\n\n\n\n
  5. For Horizontal Scrolling<\/strong>, click the edit icon.
    \"Scrolling<\/li>\n\n\n\n
  6. Set the following:\n
      \n
    • Direction<\/strong>\n
        \n
      • To Left<\/strong> <\/li>\n\n\n\n
      • To Right<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Speed<\/strong>: Set motion speed of horizontal scroll from 0 to 10<\/li>\n\n\n\n
      • Viewport<\/strong>: Determine when to begin the movement, based on viewport height (the visible size of the device screen).
        For example, if the viewport value is set between 50 \u2013 100, the movement starts only after you scroll half the viewport height.<\/li>\n\n\n\n
      • Apply Effects On<\/strong>: Select to apply the motion effects on Desktop, Tablet, and\/or Mobile devices<\/li>\n\n\n\n
      • Effects Relative To<\/strong>\n
          \n
        • Default<\/strong> – Calculates the effect based on the user’s viewport.  Relative to Viewport measures the height of the actual viewport\/presented screen.<\/li>\n\n\n\n
        • Viewport<\/strong> – Calculates the effect based on the user’s viewport.\u00a0 Relative to Viewport measures the height of the actual viewport\/presented screen.<\/li>\n\n\n\n
        • Entire Page<\/strong> – Calculates the effect relative to the entire page height.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Click Publish<\/strong>.<\/li>\n<\/ol>\n\n\n\n

          Calculate viewport value<\/h2>\n\n\n\n

          You need to calculate the viewport value according to the height of the viewport (meaning the visible size of the screen), and not to the height of the full page. This is true in all situations, except for elements with a fixed position. See image below:<\/p>\n\n\n\n

          \"Scrolling<\/figure>\n","protected":false},"excerpt":{"rendered":"

          Learn to create a horizontal scroll effect to move elements right and left<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3cfd15df08fbb2c4090a0"],"footnotes":""},"categories":[1438],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-2290","post","type-post","status-publish","format-standard","hentry","category-manage-your-widgets","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"\nScrolling Effects \u2013 Horizontal Scroll | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Scrolling Effects \u2013 Horizontal Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Scrolling Effects \u2013 Horizontal Scroll | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Scrolling Effects \u2013 Horizontal Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-13T10:24:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-14T12:13:04+00:00\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Scrolling Effects \u2013 Horizontal Scroll\",\"datePublished\":\"2023-08-13T10:24:00+00:00\",\"dateModified\":\"2024-01-14T12:13:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\"},\"wordCount\":288,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Manage your widgets\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\",\"url\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\",\"name\":\"Scrolling Effects \u2013 Horizontal Scroll | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"datePublished\":\"2023-08-13T10:24:00+00:00\",\"dateModified\":\"2024-01-14T12:13:04+00:00\",\"description\":\"Learn everything about Scrolling Effects \u2013 Horizontal Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Manage your widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/manage-your-widgets\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Scrolling Effects \u2013 Horizontal Scroll\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Scrolling Effects \u2013 Horizontal Scroll | Elementor","description":"Learn everything about Scrolling Effects \u2013 Horizontal Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/","og_locale":"en_US","og_type":"article","og_title":"Scrolling Effects \u2013 Horizontal Scroll | Elementor","og_description":"Learn everything about Scrolling Effects \u2013 Horizontal Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/","og_site_name":"Help","article_published_time":"2023-08-13T10:24:00+00:00","article_modified_time":"2024-01-14T12:13:04+00:00","author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Scrolling Effects \u2013 Horizontal Scroll","datePublished":"2023-08-13T10:24:00+00:00","dateModified":"2024-01-14T12:13:04+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/"},"wordCount":288,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Manage your widgets"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/","url":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/","name":"Scrolling Effects \u2013 Horizontal Scroll | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"datePublished":"2023-08-13T10:24:00+00:00","dateModified":"2024-01-14T12:13:04+00:00","description":"Learn everything about Scrolling Effects \u2013 Horizontal Scroll in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/scrolling-effects-horizontal-scroll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Manage your widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/manage-your-widgets\/"},{"@type":"ListItem","position":5,"name":"Scrolling Effects \u2013 Horizontal Scroll"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/2290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=2290"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/2290\/revisions"}],"predecessor-version":[{"id":48774,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/2290\/revisions\/48774"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=2290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=2290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}