I guess that this is a fairly easy task, but I am trying since 2 days to get this to work...
Basically I just want to move a container from right to left in a loop. The container contains blog-tags and since there are many tags, some of them are overflowing. That's why I want to animate them.
The animation from right to left works just fine. Here is the code:
$kb_tags = $('.kb-tags-group');
let tween = gsap.to(".kb-tags-group", {
duration: 8,
x: () => $kb_tags.offsetWidth, // animate by the px width of the nav
xPercent: -150, // offset by the width of the box
ease: "none",
repeat: -1,
});
});
But the Problem is, that after the animation ends, the animation stops/starts abruptly from x again.
I want it to be a seamless loop, without white-space. So the tags should move to left, and then appear from the right side again.
What would be the best way to do this?
Thank you very much in advance!!!!