Nov 11, 2022 9:03 AM
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.
Solved! Go to Solution.
Nov 13, 2022 10:16 AM
Hi @amwilie, 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.
Nov 11, 2022 5:12 PM - edited Nov 11, 2022 5:15 PM
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;
If this answer solved your question, please mark it as the solution!
Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.
Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.
Nov 13, 2022 10:16 AM
Hi @amwilie, 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.
Nov 14, 2022 1:32 AM - edited Nov 14, 2022 1:36 AM
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.
If this answer solved your question, please mark it as the solution!
Need custom website/integration development or help optimizing HubSpot for your organization?
Schedule a consultation with us, an award-winning HubSpot Elite Partner.
Or check out our blog to get the latest in marketing, design, integration, and HubSpot knowledge.
Nov 11, 2022 2:47 PM
I imagine you're missing something (probalby from the css?). It doesn't seem to work in this jsfiddle either
Freelance HubSpot CMS Developer