CMS Development

fordburgess
Member

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

SOLVE

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.

0 Upvotes
1 Accepted solution
fordburgess
Solution
Member

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

SOLVE

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.

View solution in original post

0 Upvotes
4 Replies 4
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

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

SOLVE

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.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
fordburgess
Solution
Member

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

SOLVE

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.

0 Upvotes
alyssamwilie
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

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

SOLVE

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.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.
0 Upvotes
BarryGrennan
Top Contributor

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

SOLVE

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

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

0 Upvotes