CSS not working

Hi, I was trying to replicate this animation from codepen.io, but I had no success.
I created 2 html elements in the page, one for CSS and another for HTML:

However, the final result is this, with no animation at all:

Do you know what could I have been doing wrong?
Thanks a lot!

Copy your entire code into the forum and let’s see.

The code is in this link: https://codepen.io/studiojvla/pen/qVbQqW

Lol… I know I can look at codepen. And you didn’t do it right here.

I was looking to see if you had your tags on and stuff like that.

Also you can have it all in the same html, just get your tags right.

It might not like that you are referencing flex. But I’ll check when on PC later

Wrong tags, related to scss format . Styles format is scss, not css.

here you go:
scss converted to css codes

body {

align-items: center;

background: #e3e3e3;

display: flex;

height: 100vh;

justify-content: center;


@keyframes scroll {

0% {

transform: translateX(0);


100% {

transform: translateX(calc(-250px * 7));



.slider {

background: white;

box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);

height: 100px;

margin: auto;

overflow: hidden;

position: relative;

width: 960px;


.slider::before, .slider::after {

background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

content: “”;

height: 100px;

position: absolute;

width: 200px;

z-index: 2;


.slider::after {

right: 0;

top: 0;

transform: rotateZ(180deg);


.slider::before {

left: 0;

top: 0;


.slider .slide-track {

animation: scroll 40s linear infinite;

display: flex;

width: calc(250px * 14);


.slider .slide {

height: 100px;

width: 250px;



result in bubble :
preview: http://dogmatchsystem2022.bubbleapps.io/version-test/slider?debug_mode=true
editor: Dogmatchsystem2022 | Bubble Editor

Wow! You are amazing! Thank you very much.
So everytime I get code for animations I should convert it?

1 Like

only when it’s “scss” format.
you can use something like this https://jsonformatter.org/scss-to-css

1 Like

This is amazing ! Do you think this animation may work on a repeating group ?

Thx !

Sure. See this one: https://bubble-solutions.bubbleapps.io/version-test/card-responsive-rg?debug_mode=true.

Cards inside of RG

just need to play around with CSS to make them responsive

Thx !

I was thinking more of a scrolling animation on a repeating group, like the slider with the logos ^^

This topic was automatically closed after 70 days. New replies are no longer allowed.