[BUG] WAAPI Animation keep repeating on 'reset' using `onScroll` method

[dakumisu]

All said in the title!

For this example I want to play the animation only in the onEnterForward callback

code example:

createTimeline({
    autoplay: onScroll({
        target: el_parent,
        enter: 'bottom bottom',
        leave: 'top top',
        sync: 'resume resume resume reset', // => reset actually reset the animation and re-playing directly after
        debug: true,
    })
})
    .sync(waapi.animate(el_child, {
        scale: ['0', '1'],
        skewY: ['10deg', '0deg'],
        skewX: ['10deg', '0deg'],
        ease: waapi.convertEase(easings.eases.outExpo),
        duration: 1000,
    }), 0)

Preview video: https://streamable.com/qpqwm7

On a personnel note I would say that the word sync is appropriate to sync stuff on scroll but not for enter/leave callbacks

I would suggest something as

createTimeline({
    autoplay: onScroll({
        ...
        onEnterForward: 'resume',
        onEnterBackward: 'resume',
        onLeaveForward: 'resume',
        onLeaveBackward: 'reset',

        // Or for other purposes that my previous example
        onEnter: 'reset play', // For resetting and play the animation before each enter
        onLeave: 'pause'
    })
})

// And if you want to have a callback too

createTimeline({
    autoplay: onScroll({
        ...
        onEnterForward: (self) => {
            self.resume();
            // Do your stuff here
        },
        onEnterBackward:(self) => {
            self.resume();
            // Do your stuff here
        },
        onLeaveForward: (self) => {
            self.resume();
            // Do your stuff here
        },
        onLeaveBackward: (self) => {
            self.reset();
            // Do your stuff here
        },
    })
})

Again this is strictly personnel, I'm more into calling method than writing them in string