Wix animation delay play

Ask the community
,
1

Hi,

I’m trying to create a loop animation that stops onmousein and starts back on mouseout.

import wixanimations from 'wix-animations'
import {timeline} from 'wix-animations' 

$w.onReady(function () {

    let timeline = wixanimations.timeline({
        repeat: -1,
        yoyo: true
    })

    timeline.add($w('#tubettoOne'), {
        duration: 1000,
        y: "-=80"
    })
    timeline.play();

    $w("#tubettoOne").onMouseIn( () => {
    timeline.pause();
  } );

      $w("#tubettoOne").onMouseOut( () => {
    timeline.play();
  } );

})

    let target1 = $w('#tubettoOne'); 
        $w('#tubettoOne').onMouseIn(() => { 

    timeline()     
    .add(target1, {y: 0, x: 0, rotate: 15, scale: 1.2, duration: 200, easing: 'easeOutBounce'}) 
    .play()
    }) 

    $w('#tubettoOne').onMouseOut(() => { 
    const reset = {y: 0, x: 0, rotate: 0, scale: 1, duration: 200, easing: 'easeOutCirc'};  
    
    timeline() .add(target1, reset) 
    .play() }) 
;

The way it stops it’s good but unfortunately the way it starts back takes to muck time because it starts bouncing back before getting back to its original place.

Can someone help me?