Using gsap.set() to replace jQuery methods appears to be causing issues.

[ektorp]

Hello team Greensock - I have a GSAP marquee that fits my needs fairly well. The only issue is that it is using some basic jQuery that I need to avoid. I attempted to simply replace the jQuery with gsap.set( ) calls, but this seems to be causing a slight imperfection.

If you view the jQuery version (top marquee), it loops smoothly as expected. But when I then replace just a couple of jQuery calls with gsap.set() (bottom marquee), the first initial left block item seems to knock off unexpectedly causing an unsmooth loop. In initMarqueeBottom(), you can view just the 4 lines of modifications with native JS and gsap.set(). The jQuery calls are commented out for reference. Is there something I have missing with gsap.set() that is causing this issue? Once again, any help is greatly appreciated.

See the Pen gOZoPNo by bdang (@bdang) on CodePen

[Rodrigo]

Hi,

 

The best option is the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

Here is one example:

See the Pen ZELPxWW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[ektorp]

Hi @Rodrigo

 

Thank you for the response. Yes, I am aware of the horizontalLoop helper function. I just thought I had found a more simplified solution...with a minor gsap issue that could possibly get worked out. 

The horizontalLoop function clearly works well as is. My actual need is to have 2 marquees with 1 running left and 1 running right as my updated Codepen shows. Can this be easily achieved with horizontalLoop()? Any assistance with this would be very much appreciated Rodrigo.

[Rodrigo]

7 minutes ago, ektorp said:

Can this be easily achieved with horizontalLoop()?

Absolutely! You can create as many as you want, just keep in mind that every loop instance should have different targets to prevent unexpected results:

See the Pen dyQNeRZ by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[ektorp]

This will work great. Thanks so much @Rodrigo

 

Your assistance is very much appreciated.