updating values on existing animation

[magicspon]

Hello,

Firstly, top script, t'is bloody lovely.

Anyhow, I have a scroll based animation that changes the background colour from purple to black when you scroll down, and then red to black when you scroll up.

At the start of the scroll up there is a flash of black (i.e. the target color)

const animation = anime({
            targets: {
                from: this.from,
                to: this.to
            },
            from: this.target.from,
            to: this.target.to,
            duration: 1000,
            easing: 'linear',
            loop: false,
            autoplay: false,
            update(a) {
                vm.from = a.tweens[0].currentValue
                vm.to = a.tweens[1].currentValue
            }
        })

Then in my scroller

this.scroller.on('scroll:progress', (event) => {
            const { _scrollY } = event.target
            const progress = (_scrollY / height) * 100
            if(progress <= 100) {
                animation.seek(progress)
                animation.play()
            } 
        })

so when scroll:progress is going from bottom to top, the animation starts at the targets object for a split second, and then proceeds to transition from 100 - 0 (black - purple).

FYI, I'm using Vue and FastScroll.

demo hero: http://anime-transition-flicker.surge.sh/#/

Any thoughts, greatly appreciated.

[magicspon]

Hola...

Managed to fix the issue by adding a delay of 1ms.

If in doubt, delay it!

thanks