Olá pessoal! Estou tendo problemas ao implementar uma animação de rolagem infinita usando HTML, CSS e JavaScript em um grupo repetitivo no Bubble. A ideia é que os itens rolem para a esquerda e, ao saírem da tela, reapareçam no lado direito, criando um efeito de loop contínuo.
O efeito funciona conforme o esperado, mas somente após atualizar a página. Quando carrego a página pela primeira vez (ou volto a ela depois de algum tempo), a animação de rolagem parece mover todo o grupo repetido em vez dos itens individuais. Isto perturba o efeito infinito porque o próprio grupo está mudando, e não apenas os itens dentro dele.
Depois de atualizar a página, ela se comporta corretamente e o efeito infinito funciona perfeitamente. Tentei alguns ajustes, mas não consegui identificar a causa desse comportamento. Alguém tem alguma idéia sobre o que pode estar causando isso e como corrigi-lo para que funcione desde o carregamento inicial da página?
O print é para mostrar que o restante do conteúdo está oculto na parte onde a animação está ocorrendo.
Esse é o html q estou usando :
"
#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%));
}
}
Eu tentei outras abordagens no HTML mas ocorria a mesma coisa. Obrigado pela ajuda