Estoy tratando de hacer una animación de banner de desplazamiento horizontal con diferentes imágenes SVG con la ayuda de HTML, CSS y JavaScript. Quiero que la animación se vea similar a la animación de logros en el sitio web de Lando Norris .

Como tengo poca o ninguna experiencia en JavaScript, busqué una animación de banner horizontal y encontré esto . Luego procedí a reemplazar

 <div class="sample-item-3"></div>

con

 <img src="link to the svg image on wordpress" class="sample-item">

y luego cambió el código css correspondiente

 .sample-item { width: auto; height: 125px; vertical-align: middle; padding-right: 20px; }

Configuré el ancho en automático porque las imágenes svg tienen diferentes proporciones de alto a ancho y quería que todas tuvieran la misma altura.

El problema ahora es que las imágenes no se formatean correctamente ( captura de pantalla de las imágenes cuando ejecuto el código ). Puedo arreglar esto cambiando el ancho a un valor específico como 125px. Sin embargo, el problema es que, debido a las diferentes proporciones de altura y ancho de las imágenes svg, se vuelven desiguales (diferentes alturas).

Como mencioné antes, no estoy muy familiarizado con JavaScript, así que no sé si eso tiene algo que ver y, si es así, no sabría cómo solucionarlo. Hasta ahora solo he intentado arreglarlo con CSS, aunque fue en vano.

El resto del código se puede encontrar en Codepen (solo cambié el código mencionado)

Cualquier ayuda será apreciada.