CSS Carousel won't work when transferring from React to Hubspot

Develop, Build & Integrate CMS Development
1

Hello, I’d like to have module that is an autoplaying carousel with all the logos of my company’s clients that I can use in multiple different places on our site. I have used this exact code with styled components in a React application for another one of our websites, and it works perfectly. However, it does not work when I test it in the Design Manager Preview. Here is the CSS in question:

 @keyframes slide {
 0% { transform: translateX(0); };
 100% { transform: translateX(calc(-250px * 7)); }
}
.slideContainer {
 height: 150px;
 margin: auto;
 overflow: hidden;
 position: relative;
 width: 100vw;
}
.slideContainer::before, .slideContainer::after {
 content: "";
 height: 150px;
 position: absolute;
 width: 20%;
 z-index: 2;
 background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.slideContainer::after {
 right: 0;
 top: 0;
 transform: rotateZ(180deg);
}
.slideContainer::before {
 top: 0;
 left: 0;
}
.slider {
 animation-name: slide;
 animation-duration: 30s;
 animation-iteration-count: linear infinite;
 display: flex;
 width: calc(250px * 14); 
}
.logo {
 height: 160px;
 width: 160px;
 margin: 0 30px 0 30px;
 background-color: pink;
}

And here is the HTML in question:

<link href="module.css" rel="stylesheet">
<div class="slideContainer">
 <div class="slider">
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 </div>
</div>

I wish I could report that I’ve tried many solutions, but I don’t really know what to do since this works perfectly on my other site. The only difference between my code on Hubspot and the other site is that I added the animation duration and iteration properties, instead of just having those under the animation property. Thanks in advance for your help.

2

I imagine you’re missing something (probalby from the css?). It doesn’t seem to work in this jsfiddle either

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

3

There’s an errant colon in the middle of your keyframe, after the 0% end bracket. Remove that and it should work.

Also “linear infinite” is not a valid property value for animation-iteration-count. Should be:

animation-iteration-count: infinite;
animation-timing-function: linear;
4

Hi @alyssamwilie, thank you for the response. What you have suggested are good practices for maintaining clean code, but what made this work for me, strangely enough, was deleting the “0% { transform: translateX(0) };” property from my keyframes animation. I don’t know why this worked, but the errant commas “linear infinite” property do not seem to have affected the animation, as they are still there, but do I appreciate you and @BarryGrennan taking the time to respond.

5

The errant semi colon I was talking about was the one at the end of “0% { transform: translateX(0) };” so, yes, I suppose deleting the whole line will also do the trick. The iteration count was a separate thing unrelated to the semi colon.