CSS/Javascript infinite marquee is chopped and repeats when finish

[Valery_04]

I need help with the marquees on my homepage. They look this way and when they go to the limit they start from 0% again. I want them similar to the 'marquee' HTML tag because the landing page made that tag not move anymore.

Page: Valkyria's Hideout

[fauxhumanoid]

so, what an infinite marquee does is clone your content then put it at the end so that it appears to be infinitely scrolling. i think the clone of your marquee content is either 1) not identical to the first, or 2) styled differently to where scaling discrepancies would happen. are you sure your clone matches exactly, or the javascript you're using is cloning it properly??

[Dan Q]

The single biggest problem that I can see is that you've got overflow: hidden on both the wrapper ("marqueeTrack") and on the contained "marquee-group"s. This frees the marquee-groups to be narrower and crop THEIR content, which trims off the ends of the stamps.

I see what you're aiming for with two marquee-groups, and then animating both of them. But you might find it simpler to put both the original and duplicate group inside some wrapper and animate THAT (but only move it half as far). That'd make the code simpler.

Alternatively, go the opposite direction and animate each stamp individually. This gives the benefit that you don't have to think about the wrapping: just animate each one back to the start at the end of its journey. This is tougher and you're likely to need some more-complex CSS, but it'll save you from having so much HTML (or in your case; lets you drop the JS dependency).

(Incidentally: I appreciate the aria-hidden on the duplicate marquee, but if it's just going to be images with no alt-text, you might as well aria-hidden the whole thing!)

I'd love to have a go at cracking it for you, but right now I'm sweating my ass off in the arrivals area of an under-cooled Spanish airport and I'm going to have to go find some transport presently. But if you're still stuck in a fortnight, resurrect this thread and I'll take a deeper look! (Odds are good somebody will have been able to help by then!)

[Valery_04]

Thanks for helpling! 

I modified the CSS attributes (such as 'overflow', 'width' and '@keyframes'; duplicated image codes and deleted the script, so I give the code to everyone who wants a pure CSS infinite marquee similar to the HTML tag!

Code

.marquee-track {
  display: flex;
  overflow: hidden;
  width: auto;
}

.marquee-group {
  display: flex;
  justify-content: space-around;
  gap: 1px;
  width: 100%;
  animation: scrollMarquee 20s linear infinite;
}

.marquee-group img {
  height: auto;
  width: auto;
  object-fit: contain;
}

@keyframes scrollMarquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* Moves exactly by the width of one group plus the structural gap */
    transform: translateX(calc(-100% - 100%));
  }
}