Horizontal Infinite Scrolling Loop with events

[late_night1982]

I'm building a horizontal infinite loop with GSAP, ScrollTrigger and Draggable. The direction of the loop is triggered by scrolling up or down and you can also drag the content.

 

I'm trying to create two events "mouseenter" and "mouseleave". When you hover the draggable content I would like to slower the speed and when you leave it, the speed goes back to normal. Right now I use these events to pause and play the scrollable content because I'm not sure how should I modify the speed.

 

Also, how could we modify the ease of the content once the it has been dragged (mouse click released)?

 

Thank you.

 

Codepen

See the Pen gbOYZKr by mathieupreaud (@mathieupreaud) on CodePen.

[Rodrigo]

Hi,

 

Just store the scroll direction value and use timeScale in the event handlers:

https://gsap.com/docs/v3/GSAP/Timeline/timeScale()

 

Here is a fork of your demo:

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

 

Hopefully this helps

Happy Tweening!

[late_night1982]

Hi Rodrigo,

 

Thank you very much for your help.

 

I think I detected an issue. It seems that when you start dragging the content multiple times, once you leave the container, the loop stops scrolling.

 

Last question, I would like to add an ease when you drag the content. Right now, when you drag it there is no ease in the dragging release. You can see it in this codepen. I used it as an inspiration for my project.

 

See the Pen LEYYNbE by mathieupreaud (@mathieupreaud) on CodePen.

[Rodrigo]

Hi,

 

In order to have easing on the draggable side of things in the Horizontal Loop helper function, you need to use the Inertia Plugin:

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

 

The Inertia Plugin is one of the paid tools GSAP has:

https://gsap.com/pricing/

 

As for the Draggable issue, you'll have to tinker with the Draggable instance in the helper function, most likely this line:

onThrowComplete: () => {
  syncIndex();
  wasPlaying && tl.play();
}

Perhaps remove the wasPlaying conditional check, but also you'd have to add some logic to connect with the last scroll direction as well.

 

Hopefully this helps

Happy Tweening!

[late_night1982]

Hi,

 

Thanks again for your reply. I'm sorry for my late answer.

 

I made some test in mobile to check the behavior of the draggable movement. There is an issue when you scroll vertically on mobile (I'm referring to the natural scroll), it makes the horizontal draggable content jump to the left. 

 

You can reproduce the issue with this updated codepen. I don't find the way how to resolve it.

 

See the Pen LEYYNbE by mathieupreaud (@mathieupreaud) on CodePen.

 

Thank you.

[Rodrigo]

Hi,

 

We would look into it and keep you posted.

 

Please a little patience.

[late_night1982]

Thank you Rodrigo

[GreenSock]

@late_night1982 does this work any better for you?:

See the Pen mydVzZb?editors=0010 by GreenSock (@GreenSock) on CodePen.

[late_night1982]

Hi, 

 

Thanks a lot for fixing the issue. Now it works perfectly in mobile.

 

I was wondering, is it possible to modify with GSAP the value of the speed parameter only for mobile? Without repeating all the events mouseenter, mouseleave and the declaration of const loop = horizontalLoop.

[mvaneijgen]

Check out gsap.matchMedia() Hope it helps and happy tweening! 

[late_night1982]

Thank you @mvaneijgen 

 

[Rodrigo]

Hi,

 

Just to complement @mvaneijgen's great advice, the Horizontal Loop helper function is responsive in it's core, so it wouldn't be necessary to re-create the loop instance, what you can do with GSAP MatchMedia is to alter the timeScale value of the Timeline instance the helper function returns:

https://gsap.com/docs/v3/GSAP/Timeline/timeScale()

 

Something like this:

const loop = horizontalLoop(/* congif here */);
const mm = gsap.matchMedia();

mm.add({
  small: "(max-width: 767px)",
  large: "(min-width: 768px)",
}, (ctx) => {
  const { small, large } = ctx.conditions;
  loop.timeScale(small ? 0.5 : 1);
});

That will set the speed of the loop to half in small screens and normal speed on large screens, like that you don't have to create the loop again and save a few CPU cycles on the process.

 

Hopefully this helps.

Happy Tweening!

[late_night1982]

Thank you so much @Rodrigo for this complement of information. That makes my code much cleaner.