Infinite horizontal marquee issue

Design help Animations & Interactions
1

Hi all,

I am currently trying to implement the infinite horizontal marquee (inspired by this project: Marquee Infinite Scroll Menu - Cloneable - Webflow).

The animation appears to be working smoothly when I view the project via the Webflow designer preview function: Webflow - Copy of Richard Wang

However, when I view the actual published site (https://richardwang-0798e29295230d15802881e6cb1.webflow.io/), the animation does not run smoothly. The horizontal loop animation is every 14 seconds, and at the end of the 14 seconds the contents in the container “jumps” in position. However, when I go into the animation settings, the content at the end of the animation should be in the same X position (currently set to -91VW) as the content in the beginning (hence it should be smoothly scrolling infinitely).

Any guidance as to (1) why the live version is showing the animation differently from the preview function and (2) possible fix to the “jump” in animation on the live version would be greatly appreciate, thanks!

Here is my public share link: LINK
(how to access public share link)

2

Hey @richardwang

I’d recommend you actually go with a custom swiper for this. Basically what I think would help is using swiper.js on autoplay

You can find prebuilt ones here Webflow CMS Swiper Sliders - Free Cloneable - Webflow

Let me know if this helped!

3

Thank you for the suggestion @marko-ninja ! However, the example linked appears to also do a weird jump at the end of the cycle.

4

Hi Richard,

I think you need to set the padding on Image to be equal on either side. Otherwise the spacing (and therefore timing) is inconsistent at the end of the 14s.

Let me know if you need a hand! I managed to get it working.

5

Hey @WEBOAF_OLLIE , thanks for the catch! I updated the demo site and have standardized the margins + padding but it still shows a slight jump (albeit much better now than before). Does it look fine on your end? Maybe its my screen dimensions…

Preview: Webflow - Copy of Richard Wang

Live version: https://richardwang-0798e29295230d15802881e6cb1.webflow.io/