Adding infinite marquee animation

[liam_putra]

im trying to create an infinite marquee animation, there is a community post on this

but its for webflow, can anyone help me how to do this on weweb ?

[jptrinh]

The gif is pretty laggy, but it’s smooth irl

Here are 2 ways I’ve managed to make it work:

Method 1: content slider (as suggested by @GeovanyNocodeBR on the original post)
Enable the infinite loop and autoplay parameters. Disable navigation and pagination.

Easier to setup, but heavier as it relies on the Swiper library.

---

Method 2: the CSS way (using Ryan Mulligan implementation)

1. Define the animation (in a HTML Embed to see it on the Editor)

<style>
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    /* My gap is set to 1rem */
    transform: translateX(calc(-100% - 1rem));
  }
}
</style>

2. On the marquee div:

• flex-direction: horizontal
• column-gap: 1rem
• width: 100%
• overflow: hidden

3. On the marquee-content div:

• flex-direction: horizontal
• column-gap: 1rem
• justify-content: space-around
• min-width: 100%
• Custom CSS: animation: 6s linear infinite scroll;

[GeovanyNocodeBR]

Very good JP

[liam_putra]

@jptrinh

using Ryan Mulligan implementation

it’s working, but i cant grasp how does the keyframe knows it needs to animate the marquee div ?

i don’t see any binding

[Update]

nevermind, i see the scroll in the css is what’s binding to the keyframe.

Thanks man!