--- title: "How to Add Scroll Effect on Horizontal Page Scroll in Elementor?" url: https://theplusaddons.com/docs/add-scroll-effect-on-horizontal-page-scroll-in-elementor/ date: 2023-11-08 modified: 2026-04-10 lang: en author: "Aditya Sharma" description: "Do you want to add a scroll effect on the horizontal page scroll in Elementor? With the Horizontal Scroll widget from The Plus Addons for Elementor you can add different..." image: https://theplusaddons.com/wp-content/uploads/2023/11/How-to-Add-Scroll-Effect-on-Horizontal-Page-Scroll-in-Elementor_-1024x536.jpg word_count: 517 --- # How to Add Scroll Effect on Horizontal Page Scroll in Elementor? ## - Utilizes the Horizontal Scroll widget from The Plus Addons for Elementor to create dynamic scrolling effects on web pages. - Enables various scrolling animation effects such as vertical, horizontal, opacity, rotate, scale, skew, border radius, and background color through the Advanced tab settings. - Supports multiple widgets including Accordion, TP Text Block, and Creative Image for integration with the Horizontal Scroll feature. Do you want to add a scroll effect on the horizontal page scroll in Elementor? With the Horizontal Scroll widget from The Plus Addons for Elementor you can add different scrolling effects on a number of The Plus Addons for Elementor widgets. This feature allows website visitors to experience a smooth and dynamic transition as they scroll horizontally through a webpage. *To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, [click here](/docs/horizontal-scroll-elementor-widget-settings-overview/).* ***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-horizontal-scroll?utm_source=tpae&utm_medium=docs&utm_campaign=text) To do this, add the Horizontal Scroll widget on the page.  In the **Content** tab click on the **Create Template** button to create your Elementor template. > *Note: You can create the Elementor template beforehand as well.* In the Elementor template make sure to add The Plus Addons for Elementor widgets which has integration with the Horizontal Scroll widget. You can check the full list of supported widgets below. For example, let’s select the **Creative Image** widget and add an image to it. Then, go to the **Advanced** tab, in the **Plus Extras** tab, enable the **Horizontal Scroll** toggle. You’ll see an item, open it. Now from here, you can add different scrolling effects. To add any effect you have to first add the **Scroll Options**, click on the pencil icon. In the settings, you have to set start and end trigger points i.e. where the animation trigger starts and ends. Then you have to mention the start and end scroll points i.e. the area on the screen where the animation will happen. Once the scrolling options are set, you can add different scrolling animation effects like vertical, horizontal, opacity, rotate, scale, skew, border radius and background color. You can add multiple effects together as well. For instance, we’ll add a scale effect.  ![creative image plus extra horizontal scroll](https://theplusaddons.com/wp-content/uploads/2023/11/creative-image-plus-extra-horizontal-scroll.gif) To fine tune the animation you can enable the **Developer** toggle and in the **Trigger Name** field add your custom trigger name. Now you’ll see the trigger and scroll points on the screen based on that you can adjust your animation. You can click on the **+Add Item** button to add more scrolling effects from different trigger points. By enabling the **Visibility** toggle, you can remove scrolling effects for responsive devices. In the **Responsive Width** field, you can set the minimum screen width. Once done, save the template. Now, when you scroll you’ll see scrolling effects on your widgets as per your settings while the content changes on horizontal scroll. ### Horizontal Scroll Supported Widgets - [Accordion](https://theplusaddons.com/elementor-widget/elementor-accordion/) - [TP Text Block](https://theplusaddons.com/elementor-widget/elementor-advanced-text-block/) - [Advanced Typography](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/) - [Advanced Buttons](https://theplusaddons.com/elementor-widget/elementor-advanced-buttons/) - [Advertisement Banner](https://theplusaddons.com/elementor-widget/elementor-banner-widget/) - [Audio Player](https://theplusaddons.com/elementor-widget/elementor-audio-player/) - [Before After](https://theplusaddons.com/elementor-widget/elementor-before-after-slider/) - [Blockquote](https://theplusaddons.com/elementor-widget/elementor-blockquote/) - [Breadcrumbs Bar](https://theplusaddons.com/elementor-widget/elementor-breadcrumbs/) - [Caldera Forms](https://theplusaddons.com/elementor-widget/#plus-adapted-wgts) - [Carousel Remote](https://theplusaddons.com/elementor-widget/elementor-carousel-remote-sync/) - [Contact Form 7](https://theplusaddons.com/elementor-widget/contact-form-7-styler/) - [Countdown](https://theplusaddons.com/elementor-widget/elementor-countdown-timer/) - [Draw SVG](https://theplusaddons.com/elementor-widget/elementor-draw-animated-svg-icon/) - [Dynamic Device](https://theplusaddons.com/elementor-widget/elementor-dynamic-device-mockups/) - [Dynamic Smart Showcase](https://theplusaddons.com/elementor-listing//magazine-slider/) - [Everest Form](https://theplusaddons.com/elementor-widget/everest-forms-styler/) - [Flip Box](https://theplusaddons.com/elementor-widget/elementor-flipbox/) - [Gravity Form](https://theplusaddons.com/elementor-widget/gravity-forms-styler/) - [Heading Animation](https://theplusaddons.com/elementor-widget/elementor-heading-animations/) - [Heading Title](https://theplusaddons.com/elementor-widget/elementor-heading-titles/) - [Info Box](https://theplusaddons.com/elementor-widget/elementor-info-box/) - [Mailchimp](https://theplusaddons.com/elementor-widget/mailchimp-form/) - [Ninja Form](https://theplusaddons.com/elementor-widget/ninja-forms-styler/) - [Number Counter](https://theplusaddons.com/elementor-widget/number-counter/) - [Post Search](https://theplusaddons.com/?s=perfect) - [Pricing List](https://theplusaddons.com/elementor-widget/elementor-price-list/) - [Pricing Table](https://theplusaddons.com/elementor-widget/elementor-pricing-table/) - [Process Steps](https://theplusaddons.com/elementor-widget/elementor-process-steps/) - [Progress Bar](https://theplusaddons.com/elementor-widget/elementor-progress-bar/) - [Style List](https://theplusaddons.com/elementor-widget/elementor-stylish-list/) - [Switcher](https://theplusaddons.com/elementor-widget/elementor-switcher/) - [Tabs/Tours](https://theplusaddons.com/elementor-widget/elementor-tabs/) - [Video Player](https://theplusaddons.com/elementor-widget/video-player/) - [WP Forms](https://theplusaddons.com/elementor-widget/wpforms-styler/) - [Button](https://theplusaddons.com/elementor-widget/free-elementor-buttons/) - [Creative image](https://theplusaddons.com/elementor-widget/creative-images-for-elementor/) Also, check [How to Make a Section Sticky on Scroll in Elementor Horizontal Page Scroll.](https://theplusaddons.com/docs//make-a-section-sticky-on-scroll-in-elementor-horizontal-page-scroll/)