topic Re: CSS Carousel won't work when transferring from React to Hubspot in CMS Development

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

fordburgess — Fri, 11 Nov 2022 14:03:06 GMT

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:

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.

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

BarryGrennan — Fri, 11 Nov 2022 19:47:22 GMT

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

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

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

alyssamwilie — Fri, 11 Nov 2022 22:15:25 GMT

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;

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

fordburgess — Sun, 13 Nov 2022 15:16:58 GMT

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.

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

alyssamwilie — Mon, 14 Nov 2022 06:36:15 GMT

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.