Ive been working on this for the better part of the morning, and can’t seem to figure it out. Ive checked out some YouTube videos and also did some googles, but I can’t get it to work. Can someone help me solve this problem, I know im close to figuring it out 
Im trying to make my text loop infinitely. I almost got it but as you can see the timing is off.
Please help.
Just to be extra clear, Im trying to set the text in a way that they seamlessly loop. 
I found this page which seems to have what you want.
Yoo this site is pretty awesome 
Thanks for the heads up BB, Im looking into it now 
This works, but I have no idea what alot of this stuff is doing 
Im going to try to figure out how this works because the code is small enough to digest. But yea, alot of these properties ive never come across before. Thats a good thing I suppose
Theres also still a hiccup in the animation as well.
.marquee {
position: absolute;
overflow: hidden;
–offset: 20vw;
–move-initial: calc(-25% + var(–offset));
–move-final: calc(-50% + var(–offset));
z-index: 1;
width: 200%;
margin-top: 20em;
}
what are these elements ? ? ? why do they have these lines in front of them? what does this mean?
–offset: 20vw;
–move-initial: calc(-25% + var(–offset));
–move-final: calc(-50% + var(–offset));
I cannot find any information about these 
Those are custom variables. Notice how –offset is defined and then immediately used in the next two custom variables.
This makes alot of sense now! The developer is doing what I initially was having trouble with by offsetting the text for the animation loop 
@keyframes marquee {
0% {
transform: translate3d(var(–move-initial), 0, 0);
}100% {
transform: translate3d(var(–move-final), 0, 0);
}
}
very interesting 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.