Can someone help me figure out this animation?
I'm currently trying to make an icon slider for my portfolio, but I'm having issues making the icons come in a continuous loop without the split second reset at the end? I've been working on learning animations recently, so maybe I'm just missing something? I've tried looking on YouTube and Google and all the examples I've seen don't have this issue that I'm having, so I'm pretty much just lost at this point
Portfolio: https://www.devjones.space/
4 Replies
Try changing your -650px to -100%
By using a percentage your animation won’t repeat until it ihas moved 100% of its width.
You could also consider giving the start of the animation a translate of 100% so that it starts off to the right.
I just tried setting it -100%. It is re-looping still, but now it's just flying a lot faster, dissapears, then comes back a few seconds later
I just set the animation for 0% - transform: translateX(-100%) and its looping properly but its so spaced out
ok, sorry, I was on the mobile and didn't read your post properly. When I opened your page I noticed that the animation didn't appear to complete so wanted to fix that....
haha all good
@keyframes slide
0%
transform: translateX(-100%)
100%
transform: translateX(calc(250px * 13))
Ive set it to this now, and seems fine, just gotta find the right spacing now