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:
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?
only when it’s “scss” format.
you can use something like this https://jsonformatter.org/scss-to-css
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.
