seamless loop gap issue at the end

[codechirag]

Hey guys, I am using seamless horizontal loop but having issue of spacing at the end. it is not maintaining proper space at the last item. here is the pen. Help is appreciated.

See the Pen QWXNqxL by EmpChirag (@EmpChirag) on CodePen.

[mvaneijgen]

the gap property only adds space between items and not to the first or last item, in this case you do want this start and end item to have space, so that when the whole block loops it has the space baked in to the whole block. So adding space using any of the old school methods is your best bet. Hope it helps and happy tweening! 

 

See the Pen LYKNgby?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen.

[codechirag]

@mvaneijgen thank you very much...

[codechirag]

Hi @mvaneijgen, I have the similar kind of issue so not creating new post, Hope that's right and if not please correct me,

I am having issue while I use this loop just before the end of the element the loop gets reset. 

 

See the Pen NWQPvGb by EmpChirag (@EmpChirag) on CodePen.

[mvaneijgen]

The seamless loop helper function uses the elements to loop, so adding some element around each of the text element end using that in th helper function fixes your issue. Hope it helps and happy tweening! 

 

See the Pen NWQPvLa?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Yep, as Mitchel mentions the Horizontal Loop helper function works with DOM elements not single words, those are just the content of a DOM element nothing more. In @codechirag's demo the helper function sees just one element so it moves that single element to the left and when that is done, the element is set back to it's starting position, which is exactly what the helper function does. There is no way the helper function can check the text string inside it and create DOM nodes in order to work the way you expect, for that you need to use SplitText:

https://gsap.com/docs/v3/Plugins/SplitText/

[codechirag]

Hey Guys @mvaneijgen @Rodrigo, Thanks a lot you guys are awesome. Now I understand the thing but one last thing I wanted to ask, at the end sometimes  the function takes time to regenerate the elements it shows blank space for a while.

[Rodrigo]

Hi,

 

I'm not seeing that behaviour in Mitchel's demo, everything seems to be working as expected 🤷‍♂️

[codechirag]

@Rodrigo, yes I have made a minimal demo but in my actual react project it is happening like that.

 

here is the video https://www.loom.com/share/42d949af51bb40b48fa0fe1fb962f3ed?sid=7538ed5f-9c14-4706-9444-745e32412ba8

[Rodrigo]

Sorry that is a video not a minimal demo, nothing we can do with that.

 

The codepen you have in your first still has the same setup, so nothing has changed. Mitchel's demo is the one that prevails as a solution soto speak.

 

Here is a similar demo in React:

https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx

 

Happy Tweening!

[codechirag]

@Rodrigo, I have updated the recent code in this snippet where the issue is coming,

 

https://stackblitz.com/edit/vitejs-vite-eh6mh5?file=src%2FApp.jsx

[Rodrigo]

You have some elements between the words that have margins of 71 px, just add that to the config of the helper function (is right there in the documentation, on the comments of the helper FYI):

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

horizontalLoop('.loop div', { duration: 30, repeat: -1, paddingRight: 71, });

Hopefully this helps

Happy Tweening!

[codechirag]

Hi @mvaneijgen ,

 

I don't know why but I get some issue everytime I use helper function. right now the right side line animation stops randomly and starts again.

 

See the Pen NPWNMyL by EmpChirag (@EmpChirag) on CodePen.

[Rodrigo]

Hi,

 

There has to be something wrong in your HTML setup because this is working as expected:

See the Pen zxYqLaM by GreenSock (@GreenSock) on CodePen.

 

Also you're using what seems to be a very outdated version of the helper function. Always go to our codepen demos in this URL in order to get the latest version of the Seamless Loop helpers and other helper functions as well:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Hopefully this helps

Happy Tweening!

[codechirag]

@Rodrigo Hey thanks a lot I have used this code and worked fine.

[codechirag]

@Rodrigo I have encountered 1 thing in your code as well the margin gap becomes inconsistent between the images.

[Rodrigo]

Mhhh... I tested the demo in different browsers on Ubuntu and Mac without seeing any difference in the vertical margins 🤷‍♂️