Animating a element position and make it loop infinitely (on a wheel event)

[Michaël Garcia]

On my wheel event, I want to animate the position of a sentence (like a marquee).

I wrote my sentence twice so I can reset the element position to pretend it loops infinitely.

 

Eventually, I want to do the exact same thing than this post, except it's not a textPath :

 

So far I'm using the quickTo() method but when I reset my element position, it's not made instantly despite of my gsap.utils.wrap()

I managed to make this work by using a quickSetter() method but since I'm using a requestAnimationFrame, I'd like to keep using a quickTo()

Should I use a proxy to make this work ? 

 

    let wheel = 0;
    let total = 0;

    const content = document.getElementById('content')
    const half = content.clientWidth/2
    const wrap = gsap.utils.wrap(-half, 100)
    const xTo = gsap.quickTo(content, "x", {duration:0.5, ease:'power3'})

    let isWheeling;

    window.addEventListener('wheel', (e) => {
        wheel = e.deltaY;
        
        window.clearTimeout( isWheeling );
        isWheeling = setTimeout( () => {
            wheel = 0
        }, 66);
    });

    gsap.ticker.add(tick)

    function tick () {
        total += wheel
        xTo(wrap(total))
    }

 

Thank you very much for your help

[GreenSock]

The problem is that you're wrapping the value that you feed into the quickTo(). So let's say it wraps so the value is always between 0 and 500 and you set it to 499 and it's almost there and then you feed in a wrapped 501 value which would get converted to 1...that means you're telling the quickTo() to animate from 499 to 1, thus it goes in the negative direction when you actually want it to go in the positive direction. So you could add a modifier to the quickTo() and do the wrapping there instead: 

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

[Michaël Garcia]

Thank you very much for your explanations.

It works like a charm, the result is super clean !

[Michaël Garcia]

Hello GSAP masters, I'd like to go deeper on this code.
I've been wondering two things : 

• is there a way to trigger a console.log() each time the loop restarts (from both direction) ?
   
• is there a way to add easing depending of the progression ? For example I want my square to go easeIn for 0 to 0.2 of its translate and to go easeOut form 0.8 to 1.0 of its translate.

I'd live to have some inputs on those two points.
Thank you very much for your lights and help!

[Rodrigo]

Hi,

 

4 hours ago, Michael31 said:

is there a way to trigger a console.log() each time the loop restarts (from both direction) ?

That should go in the wheel event handler.

4 hours ago, Michael31 said:

is there a way to add easing depending of the progression ? For example I want my square to go easeIn for 0 to 0.2 of its translate and to go easeOut form 0.8 to 1.0 of its translate.

That's more difficult with the current approach, since it's using GSAP ticker, so the quickTo instance is started on every single tick (that's why the console call should go in the wheel event by the way) and the only thing it changes is the final value, so using any ease in would cause a very odd behaviour. Is worth noticing that is not a bug, but just the way things work when using the ticker. Also with this current approach adding an ease in function would look weird, imagine the user scrolls down, the animation starts with an ease in and then, midway through the animation, the user uses the wheel again. The animation would be triggered again with the ease in, which would slow down the box and then speed it up again.

 

Hopefully this helps

Happy Tweening!

[Michaël Garcia]

Thanks for your answer @Rodrigo

 

34 minutes ago, Rodrigo said:

That should go in the wheel event handler.

Actually it's more complicated that this because there's a delta of time between the current wheel value and its application on the quickTo().

 

For my second issue, I'm speaking about an ease inOut on the progression of my animation, not related to the wheel event. I tried to play with the .timeScale() of a timeline but it doesn't run smoothly. I'm gonna keep exploring for this second issue.