To create a scroll-triggered horizontal slider using Webflow Interactions 2.0, you'll need to turn a regular slider or div-based layout into a horizontal scrolling panel controlled by vertical scroll. Here's how to build a one-swipe horizontal slider effect using scroll-triggered animations in Webflow.
1. Structure Your Slider Content with Horizontal Layout
- Create a Section: Add a
Section
element to your page. - Add a Wrapper (overflow hidden): Inside the section, add a
Div
called Slider Wrapper
. Set overflow: hidden and width: 100%. - Add a Horizontal Track: Inside the wrapper, add another
Div
called Slider Track
. Set display: flex, flex-direction: row, and give it the total width needed (for example, if you have 4 slides, set width to 400%). - Insert Slides: Add slide divs inside the
Slider Track
(e.g., Slide 1
, Slide 2
, etc.). Each slide should be width: 100vw and height: 100vh to fill the screen.
- Select the Section and go to Interactions (IX2).
- Add a new Page Trigger: Scroll → While page is scrolling.
- Instead, for better control, use Element Trigger → Scroll into view (while scrolling) on the Section.
- Set a “While scrolling in view” trigger on the
Section
. - Choose Scroll Progress (0% to 100%) as the animation timeline.
- Inside the animation:
- Target the Slider Track.
- Add a Move Animation to it.
- At 0% scroll progress: Move X = 0%.
- At 100% scroll progress: Move X = -300% (for a 4-slide setup).
- To allow enough scroll space, increase the height of the Section (or use a dummy spacer div inside it).
- Example: if you want the animation to last the equivalent of 4 screens (1 per "slide"), set the Section height to 400vh.
5. Enable Pinning for One-Swipe Feel
- On your Scroll animation, enable "Pin" on the Section.
- Set it to pin for the scroll duration.
- This ensures the section sticks while the scroll animates the slides horizontally.
6. Test and Fine-Tune
- Preview the animation. The horizontal slide should move with vertical scroll.
- Adjust scroll distance, easing, or slide widths as needed.
Summary
To implement a scroll-triggered horizontal slider with a one-swipe feel, structure your slides in a horizontal flex container, pin the parent section, and animate the slide track using “While scrolling in view” and the Move transform. Adjust the section height to control scroll duration and slide reveal speed.