Hello everyone! I’m having an issue with implementing an infinite scroll animation using HTML, CSS, and JavaScript in a repeating group in Bubble. The idea is for the items to scroll left and, once they exit the screen, reappear on the right side, creating a seamless looping effect.
The effect works as expected, but only after refreshing the page. When I first load the page (or come back to it after some time), the scroll animation seems to be moving the entire repeating group instead of the individual items. This disrupts the infinite effect because the group itself is shifting, rather than just the items inside it.
Once I refresh the page, it behaves correctly and the infinite effect works perfectly. I’ve tried a few tweaks but haven’t managed to pinpoint the cause of this behavior. Does anyone have any ideas on what might be causing this and how to fix it so it works right from the initial page load?
Uploading: image.png…
Uploading: Captura de tela 2024-11-01 224456.png…
The print is to show that the rest of the content is hidden within the part where the animation is taking place.
This is the html I’m using:
"
#scroller__inner {
padding-block: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
-ms-overflow-style: none;
scrollbar-width: none;
}
#scroller__inner::-webkit-scrollbar {
display: none;
}
#scroller[data-animated=“true”] {
overflow: hidden;
-webkit-mask: linear-gradient(
90deg,
transparent,
white 10%,
white 90%,
transparent
);
mask: linear-gradient(90deg, transparent, white 10%, white 90%, transparent);
}
#scroller[data-animated=“true”] #scroller__inner {
width: max-content;
flex-wrap: nowrap;
animation: scroll 50s linear infinite;
}
@keyframes scroll {
to {
transform: translateX(calc(-50%));
}
}
I’ve tried other HTML approaches but the same thing happened
Thanks in advance for any help!