How can I create a smooth transition for an infinite marquee slider on my Webflow website?
TL;DR
- Structure duplicated content inside a scrollable
marquee-trackwithin an overflow-hidden wrapper. - Animate the track using a continuous Move interaction with Linear easing to -50% or -100%, looping infinitely for seamless scrolling.
To create a smooth transition for an infinite marquee slider in Webflow, you’ll need to loop content seamlessly with consistent speed using interactions and CSS-style properties.
1. Structure the Marquee Elements
- Add a Section for your marquee component.
- Inside it, place a Div Block (give it a class like
marquee-wrapper) and set its overflow to hidden. - Within this wrapper, add another Div Block called
marquee-track. This will be animated. - Inside
marquee-track, place your repeating content (text, images, logos, etc.). - Duplicate the content inside
marquee-trackso the items repeat to give the illusion of infinite scroll.
2. Style the Marquee
- Set
marquee-wrapperto overflow: hidden and white-space: nowrap. - For
marquee-track, use display: flex, white-space: nowrap, and will-change: transform for performance. - Items inside the track should not wrap; keep a consistent width per item to maintain smooth motion.
3. Create the Smooth Animation
- With
marquee-trackselected, go to the Animations panel. - Create a new Page Load animation (or a Scroll animation if preferred).
- Add a looped animation using Move interaction:
- Initial State: Set translateX to 0%.
- First Keyframe: Move
marquee-trackto -50% (or -100%), depending on how much you've duplicated. - Set the duration (e.g., 20–30 seconds) and use a Linear easing for constant speed.
- Enable Loop and set to infinite.
4. Ensure Seamless Transition
- Be sure the content in
marquee-trackloops perfectly — duplicate the set once or more so the end and start match. - Use equal spacing and item widths for smooth alignment during the loop.
- Add a CSS override (via custom code) if needed to enable
animation-play-statecontrol or fine-tune performance.
5. Optional Enhancements
- Use Webflow’s
hoverormouse in/outinteractions to pause on hover. - Add manual left/right arrow controls with interactions if you want user input, but note this breaks auto-infinite flow.
Summary
To create a smooth infinite marquee slider in Webflow, structure duplicated content inside a scrollable track, animate it using a continuous Move interaction with Linear easing, and ensure the content loops seamlessly. This technique gives the illusion of endless scrolling while maintaining performance and responsiveness.