V4 Extentions Horizontal-Scroll-Animation Estimated reading: 4 minutes 3 views Turn a section into a sideways scroll. When visitors scroll down, the section stays on screen and its items slide from right to left. Great for galleries, steps and timelines. No code needed. WORKS ON Flexbox, Grid EFFECT Sideways scroll PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS Pro Tip: Install and activate both Animation Addons plugins before you start. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab. Under Animation Extensions, turn on Horizontal Scroll Animation. Click Save Settings. Horizontal Scroll Extension 1 (click to zoom) STEP 2 Build Your Row Add a Flexbox and put the items you want to slide inside it. For example, three cards. Each item is one slide. Add a Flexbox to your page. Add your items inside it, like Div Blocks with a heading and image. Select one item. Go to the Style tab, then Size. Set a Width for the item. Do the same for every item. Horizontal Scroll Extension 2 (click to zoom) Tip: Make the items wider than the screen all together. For example, give each of three items a width of 100%. If all items already fit on the screen, there is nothing to scroll. Note: Use a Flexbox or a Grid. A Div Block does not have this section. STEP 3 Turn On Horizontal Scroll Select the Flexbox that holds your items. In the General tab, open the Horizontal Scroll section. Turn on Enable. Save and view your page. Scroll down to see your items slide sideways. Horizontal Scroll Extension 3 (click to zoom) RESULT Final Result Horizontal Scroll Extension 4 Note: The section stays pinned on the screen while the items slide. When the last item shows, the page scrolls on as normal. SETTINGS Settings Turn on Enable and a few more settings appear. Horizontal Scroll Extension 5 (click to zoom) Enable Default: OffTurn horizontal scroll on or off for this Flexbox or Grid. Start Default: top topChoose when the effect starts. It has two words. The first is a point on your section. The second is a point on the screen. top top means: start when the top of the section reaches the top of the screen. Pick one from the list or type your own, like top 20%. Markers Default: OffShows guide lines on the page where the effect starts and ends. Use it to test, then turn it off before you publish. Speed Default: 1Controls how long you must scroll to move through the items. You can use 0.1 to 5. A bigger number means more scrolling, so the items move slower. A smaller number means less scrolling, so they move faster. Tip: After you change a setting, click the green Save Change button below the settings. PER DEVICE Different Settings Per Screen Size Enable, Start and Speed can change per screen size. Use the Desktop, Tablet and Mobile buttons at the top of the editor. Use a slower Speed on desktop and a faster one on mobile. Turn Enable off on mobile if you prefer normal scrolling. TRY THIS Quick Recipe Not sure where to start? Use this simple setup. ELEMENT Flexbox ITEMS 3 or more ITEM WIDTH 100% SPEED 1 NEED HELP? Troubleshooting I do not see the Horizontal Scroll section Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) and turn on Horizontal Scroll Animation. Then reload the editor. Select a Flexbox or a Grid. A Div Block does not show this section. Nothing scrolls sideways Make sure Enable is on, the page is saved, and Animation Addons Pro is active. Add at least two items inside the Flexbox. Give each item a width so that all items together are wider than the screen. I want to see where the effect starts and ends Turn on Markers. Guide lines will show on the page. Turn it off when you are done. You Did It Your items now slide sideways as visitors scroll. If you face any problem, please contact our support team. We are happy to help.
