move container from left to right in a loop

[wzrdKB]

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!!!!

[GreenSock]

Welcome, @wzrdKB

 

Having things wrap around the other side like that is actually pretty tricky to pull off due to logic stuff. We whipped together a helper function in the docs that should make it a whole lot easier: https://greensock.com/docs/v3/HelperFunctions#loop

 

Good luck!

[wzrdKB]

7 hours ago, GreenSock said:

Welcome, @wzrdKB

 

Having things wrap around the other side like that is actually pretty tricky to pull off due to logic stuff. We whipped together a helper function in the docs that should make it a whole lot easier: https://greensock.com/docs/v3/HelperFunctions#loop

 

Good luck!

Thank you so much!!! I finally did get it to work.... Since I want to learn:

Could it be, that the helper functions does not work when using hyperlinks as elements?
I had to wrap each <a> in a seperate <div> for it to work. Or may it be related to another conflict with my stylesheets, and that's why it did not want to work?

[GreenSock]

2 hours ago, wzrdKB said:

Could it be, that the helper functions does not work when using hyperlinks as elements?
I had to wrap each <a> in a seperate <div> for it to work. Or may it be related to another conflict with my stylesheets, and that's why it did not want to work?

It's probably just because browsers won't apply transforms to display: inline elements (that is unrelated to GSAP). You could set those to display: inline-block instead. 

[wzrdKB]

@GreenSock That will be it! Thank you for the help, now I am even more motivated to learn GSAP! 🙌