Adding infinite marquee animation

Ask us anything
1

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 ?

2

CleanShot 2024-06-20 at 07.22.52
The gif is pretty laggy, but it’s smooth irl :smiley:

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

Method 1: content slider (as suggested by @GeovanyFerreira on the original post)
Enable the infinite loop and autoplay parameters. Disable navigation and pagination.
CleanShot 2024-06-20 at 07.12.54
Easier to setup, but heavier as it relies on the Swiper library.

Method 2: the CSS way (using Ryan Mulligan implementation)
CleanShot 2024-06-20 at 07.16.38

  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>
  1. On the marquee div:
  • flex-direction: horizontal
  • column-gap: 1rem
  • width: 100%
  • overflow: hidden
  1. 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;
3 Likes
3

Very good JP

1 Like
4

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!

1 Like