Pause on hover and exclusively attach to scroll

[jtamudo]

Hey there,

I was playing with your library to implement it in my sites and wanted to achieve a pause on hover. Already tried your methods and properties and can´t get this functional.
Apart from that, I also wanted to achieve a paused marquee that only moves when scrolling (no loop movement once the scroll is produced). I also couldn´t achieve that using your docs params.

I would be very grateful if you could provide a small code with these features. If they aren´t achievable with reeller please tell me. This was a headache for me.
Keep the awesome work.

[Drafteed]

Try this:

import Reeller from 'reeller';
import gsap from 'gsap';

Reeller.registerGSAP(gsap);

const reeller = new Reeller({
    container: '.my-reel',
    wrapper: '.my-reel-wrap',
    itemSelector: '.my-reel-item',
    speed: 10,
});

reeller.filler.container.addEventListener('mouseenter', () => reeller.pause());
reeller.filler.container.addEventListener('mouseleave', () => reeller.resume());

[benjaminhtr]

Same problem here! It would be great if there was a method to change the speed on hover. Something like this:

reeller.filler.container.addEventListener('mouseenter', () => reeller.changeSpeed(5));
reeller.filler.container.addEventListener('mouseleave', () => reeller.changeSpeed(10));

It could also be an option to write

reeller.filler.container.addEventListener('mouseenter', () => reeller.changeSpeed(0));

to pause the marquee.

[Drafteed]

@benjaminhtr You can do this without any problems by operating gsap timeline.

reeller.filler.container.addEventListener('mouseenter', () => reeller.tl.timeScale(2));
reeller.filler.container.addEventListener('mouseleave', () => reeller.tl.timeScale(1));

In cases of reverse movement, use negative values:

reeller.filler.container.addEventListener('mouseenter', () => reeller.tl.timeScale(-2));
reeller.filler.container.addEventListener('mouseleave', () => reeller.tl.timeScale(-1));