Scroll Logo Animation effect

Mukta_92
Shopify Partner
20 0 3

Hii!! I have created a "scroll Logo Animation effect" under the Hero section by custom coding(HTML & CSS). Now problem is all the logos are not scrolling smoothly and infinity. After ending the scroll white space shows. I want to remove white space, one after the other should not end.
Please see the screenshot.


My site - https://thedigitime.myshopify.com/
Password- 707

An example site something I like - https://getsnooz.com/

https://section.store/pages/device-bundle#scrolling-logo-cloud

 

Code -

//////

<div class="logo-container">
<img src="https://cdn.shopify.com/s/files/1/0575/7914/3320/files/15.png?v=1706016306" alt="Logo 1">
<img src="https://cdn.shopify.com/s/files/1/0575/7914/3320/files/11.png?v=1706016306" alt="Logo 2">
<img src="https://cdn.shopify.com/s/files/1/0575/7914/3320/files/12.png?v=1706016306" alt="Logo 3">
<img src="https://cdn.shopify.com/s/files/1/0575/7914/3320/files/18.png?v=1706016306" alt="Logo 4">
<img src="https://cdn.shopify.com/s/files/1/0575/7914/3320/files/13.png?v=1706016306" alt="Logo 5">
</div>

<style>
.logo-container {
display: flex;
animation: scrollAnimation 17s linear infinite;
}

.logo-container img {
width: 220px; /* Adjust the width as needed */
margin-right: 140px; /* Adjust the margin as needed */
}

@keyframes scrollAnimation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}

</style>

 

/////

 

Screghjenshot_1.jpgScreffjkenshot_1.jpgScreensbghjkhot_1.jpg

 

 

 

DebutifyThemeExpert
Replies 2 (2)

Emirates7
Shopify Partner
197 44 47

Hi Mukta_92,

 

You can use marque html element instead animation css. And you can repeat images few times in html code to avoid right blank space.

 

1.png

 

Regards,

Emirates7

 

 

Mukta_92
Shopify Partner
20 0 3

Unable to do that by copying their codes. If you can please provide all HTML and CSS code. Thank you. 

DebutifyThemeExpert