Infinite text scroll help

[tuscannypolk]

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.

WNjYJvp

Please help.

[tuscannypolk]

Just to be extra clear, Im trying to set the text in a way that they seamlessly loop.

[bbsmooth]

I found this page which seems to have what you want.

[tuscannypolk]

Yoo this site is pretty awesome

Thanks for the heads up BB, Im looking into it now

[tuscannypolk]

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

[tuscannypolk]

Theres also still a hiccup in the animation as well.

[tuscannypolk]

.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

[bbsmooth]

Those are custom variables. Notice how –offset is defined and then immediately used in the next two custom variables.

[tuscannypolk]

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