Draggable Marquee effect

[Akash Ranjan]

Hello Guys,

 

I was searching for a draggable marquee effect when I stumbled upon this code pen.  This is exactly what I need but I want a marquee effect applied to it which runs in a seamless loop. I tried adding it from my end but it does not work. Please help me

 

Thank You

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

[mvaneijgen]

 

Can you share what you've already tried? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

 

[Akash Ranjan]

Hey @mvaneijgen,

 

This is what I have tried

See the Pen KKOymzM by akashrwx (@akashrwx) on CodePen.

[mvaneijgen]

Ah, I see. It is always a good idea to read the code you've copied and pasted, not that you'll understand everything, but it is good to familiarise yourself with what you use. If you check the function, there is a property called paused, which is set to true. If you remove this it will just do what you want. Hope it helps and happy tweening! 

 

See the Pen LYwOydX by mvaneijgen (@mvaneijgen) on CodePen.

[Akash Ranjan]

Yes, you are correct. Although I have read the code I completely missed that part. Thank you so much for your help @mvaneijgen

 

Also, I noticed that the marquee stops after some time. Can you tell me the reason for this?

[mvaneijgen]

Currently it plays just once, that is why it stops.

 

Before the helper loop function there are a bunch of comments all explaining what the features are of the function. Check it out you might find what you're looking for. If not post back here and let us know what you've tried.

 

If you're familiar with timelines or tweens you might already be able to guess what you can set to solve your issue. 

[Rodrigo]

Hi,

 

As @mvaneijgen mentions there are a few config options that you can pass to the Horizontal Loop helper, one of those is repeat:

const loop = horizontalLoop(".selector", {
  // Will repeat once after is completed the first time
  repeat: 1,
});

const loop = horizontalLoop(".selector", {
  // Will repeat indefinitely 
  repeat: -1,
});

When you pass any number bigger than 0 it will repeat that many times after the first run, if you pass -1 it will run endlessly.

 

Hopefully this clear things up

Happy Tweening!

[Akash Ranjan]

Thanks @Rodrigo,

 

The repeat function I figured out but there is one issue the click function.  Whenever I click on any of the box or the next and previous button the marquee stops and never resumes. Can you help me with that please?

[mvaneijgen]

Do you have an up to date demo for us? So that we can see what you're looking at.

[Akash Ranjan]

Yes I have.

See the Pen KKOymzM by akashrwx (@akashrwx) on CodePen.

 

Please have a look

[mvaneijgen]

As a quick setup I've add an onComplete callback on the next button that waits for 1 second and then .play()'s the loop again, this you'll need to add to all the addEventListener's and setup how much time you want to wait (or not) for it to start up again. Hope it helps and happy tweening! 

 

See the Pen MWNqyML?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Hi,

 

I made a fork of the original demo in our collection and added an onComplete to the toIndex method on the helper function in order to restart the loop:

function toIndex(index, vars) {
  vars = vars || {};
  vars.onComplete = () => tl.paused(false);
  // ...
}

It's on line 142 of the JS panel in this demo:

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

 

Feel free to replace that for a GSAP delayed call if you want to wait for some time in order to restart the loop, something like this:

 

function toIndex(index, vars) {
  vars = vars || {};
  // Wait for 0.5 seconds before restarting the loop
  vars.onComplete = () => gsap.delayedCall(0.5, () => tl.paused(false));
  // ...
}

Hopefully this helps

Happy Tweening!

[Akash Ranjan]

Hey @Rodrigo,

 

I just noticed a bug in the above code pen. If a user drags more than once quickly or drags again before the previous drag is finished, the slider stops.