I'm trying to make a horizontal scrolling banner animation with different SVG images with the help of HTML, CSS and JavaScript. I want the animation to look similar to what the achievements animation looks like on Lando Norris' website.

Since I have little to zero experience in JavaScript I searched for a horizontal banner animation and found this. Then I proceeded to replace

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

with

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

and then changed corresponding css code

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

I set width to auto because the svg images have different heigh to width ratios and I wanted all of them to be the same height.

The problem now is that the images don't format properly (screenshot of the images when I run the code). I can fix this by changing the width to a specific value like 125px. The problem then is though that due to different height to width ratios of the svg images they become unequal (different heights).

As I mentioned before I'm not too familiar with JavaScript so I don't know if that has to do with anything and if it does I wouldn't know how to fix it. So far I've only tried to fix it with CSS though to no avail.

Rest of the code can be found at Codepen (I only changed the mentioned code)

Any help will be appreciated.