Images missing on Infinite marquee

Design help Custom code
1

Hi everyone!

I’ve implemented Web Bae’s wonderful infinite marquee on my site but I seem to have the following problem only on mobile:

For context: My marqueee consists on six sentences separated by tiny smileys.
To make it easier to follow I’ve inserted numbers on the sentences so that you know which one is being displayed at the time. Also added a bit of bg color to the smileys also for tracking purposes.

So, it works perfectly fine on desktop, and you see how the six sentences are shown and then the loop starts again. Fine.

When I switch to tablet (iPad) it still works (you can see all the smileys) but you can already see that the loop reinitiates shortly after sentence #4. You don’t see #5 and #6, but it works.

And it’s when on mobile (watching on an iphone12) that it all breaks apart:

The first sentence is the only one displayed correctly, with its smiley visible but from that point all the smileys disappear. You can still see the bg color but the image is not displayed.

And as it happens on tablet, the loop reinitiates right after sentence #4 (might this be a clue of what is happening?)

I’ve gone through it a thousand times and can’t figure out what’s causing the images to dissappear so I’d very very much appreciate any help on this :pray:

Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey @t3r
I tried to reproduce this issue and you’re right it does disappear the last sentences (5&6) on smaller viewports - tablet and mobile.

Reason:
The looping rate remains the same for each viewport. For instance, when sentences 5 and 6 are viewed on a regular desktop screen, they appear towards the right side, which is significantly farther from the view on a mobile screen compared to the desktop view. This distance causes the sentences to complete at that end and begin their repetition, creating an infinite loop. As a result, sentences 5 and 6 don’t disappear but instead recommence from that part of the viewport itself. However, this restarting is not visible on mobile screens due to their much smaller width.

Solution:
Since you have more than 3 content wrappers (sentences) you would need to modify the transform width as a workaround in the HTML code. (Refer the image below as to what exactly needs to be changed)

Screenshot 2023-08-24 at 1.50.42 AM
Screenshot 2023-08-24 at 1.50.42 AM1606×1336 243 KB

As shown above, you need to change the transform width from 100% (relative value) to exact pixels
say, around -3000px - which means it’s basically the same thing but just pushes sentences 5 & 6 even further in mobile viewport so that it’s visible.

Yep, this small change from relative to absolute unit should do the trick. I’m sure there are other ways to do this as well, but this is what i could think of as the most efficient one. Let me know if you have any further clarifications on this.

Thanks
daspacebar

3
4

Hey @daspacebar thank you so much for looking into this!

And btw, sorry for the late reply, I’ve been with a high fever for a few days.

I tried your fix and although it does the trick to showing sentences 5 and 6, the problem of the images not showing remains the same, and it also created a huge space after sentence 6 and before the loop reinitiate. So I guess I’ll still have to figure out how to solve these issues while not breaking the endless loop illusion.

Anyway, your input pointed me into the right direction I think so thanks again for your contribution!

1 Like
5

No worries @t3r I hope you’re all recovered from the fever. Glad I could point you out in the right direction. Although I would still be interested in knowing how do you solve this problem, would love to get an update on the same whenever you do!
Meanwhile if I get something, will share it across.

Thanks much! Please take care.

daspacebar

6

ok @t3r here is simple example how responsive infinite Marquee is done. All is done only with a these few lines of CSS.

.marquee {
  --gap: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

here is live preview
here is read-only
here is article where is all you need to know. Example is using this method so you can see how this demo is created.