{"id":105216,"date":"2023-03-17T15:47:45","date_gmt":"2023-03-17T10:17:45","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=105216"},"modified":"2023-03-17T15:47:45","modified_gmt":"2023-03-17T10:17:45","slug":"add-page-transition-effect-in-elementor-horizontal-scroll","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-page-transition-effect-in-elementor-horizontal-scroll\/","title":{"rendered":"How to Add Page Transition Effect in Elementor Horizontal Scroll?"},"content":{"rendered":"\n<p>Do you want to add beautiful page transition effects in your Elementor horizontal scrolling section? Creating a website that stands out from the crowd involves having an eye for design and the technical skills to execute it well. One of the most popular tools used to build websites today is Elementor. <\/p>\n\n\n\n<p>If you&#8217;re a web developer, you&#8217;ll know that horizontal scrolling is a popular design feature that&#8217;s often used to make websites more interactive and visually appealing. However, adding a scroll effect to horizontal scrolling can take your site&#8217;s design to the next level.\u00a0<\/p>\n\n\n\n<p>The Horizontal Scroll widget from The Plus Addons for Elementor allows you to add different scrolling effects to the horizontal scrolling section.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, <a href=\"\/docs\/horizontal-scroll-elementor-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure it&#8217;s installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/elementor-horizontal-scroll?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To do this, add the widget on the page, and once you\u2019ve added your Elementor template, go to <strong>Scrolling Options<\/strong> tab &gt; <strong>Scroll Effect<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"579\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-effect.png\" alt=\"horizontal scroll effect\" class=\"wp-image-105217\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-effect.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/03\/horizontal-scroll-effect-155x300.png 155w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>In the dropdown, you\u2019ll find different scrolling effect options.<\/p>\n\n\n\n<p><strong>Normal<\/strong> &#8211; This is for normal scrolling. It won\u2019t have any effect.<\/p>\n\n\n\n<p><strong>Skew<\/strong> &#8211; This will add a skew effect to the sections when you scroll. From <strong>Skew Value,<\/strong> you can manage the amount of skew.<\/p>\n\n\n\n<p><strong>Scale<\/strong> &#8211; This will add a scaling effect to the section on scroll. When you scroll it will scale down the section in the Y axis, you can manage the value from <strong>Scale Value<\/strong>.&nbsp;<\/p>\n\n\n\n<p><strong>Bounce<\/strong> &#8211; This will allow you to add a bounce effect to the sections on scroll. You can manage <strong>Skew Value<\/strong> and <strong>Scale Value<\/strong> to create a unique bounce effect.<\/p>\n\n\n\n<p>With these effects, you can easily add some eye caching transition effects in your Elementor horizontal scroll.<\/p>\n\n\n\n<p>Also, check <a href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-paginations-in-elementor-horizontal-page-scroll\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Add Paginations in Elementor Horizontal Page Scroll<\/a>.<\/p>\n","protected":false},"author":16,"featured_media":105218,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[553,527],"class_list":["post-105216","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-horizontal-scroll","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=105216"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/105216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/105218"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=105216"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=105216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}