Use Button Click to Trigger Animation

Ask the community
,
1

Hello,
I’ve not much experience with velo coding, i hope someone can help me with this problem.

I try to do the following:
I have a button, which triggers 2 lines to animate, if it is clicked. And if I click the button a second time, the animation should reverse, so the lines are in their original location. This should be possible an infinite amount of times.

I got the animation to work when i click the button, but what i can’t get to work is the functionality, to check if the button was already clicked.

Here is my code. The “btnfinished” part is where I tried to implement this function, so far doesn’t work.

import { timeline } from ‘wix-animations’ ;

$w . onReady ( function () {

**const**  button  =  $w ( '#button1' ); 
**const**  lineup  =  $w ( '#line24' ); 
**const**  linedown  =  $w ( '#line25' ); 

**const**  show  =  timeline () 
    . add ( lineup , {  duration :  1 ,  y : + 9 ,  rotate : + 45 ,  easing :  'easeOutQuad'  }, ) 
    . add ( linedown , {  duration :  1 ,  y : - 9 ,  rotate : - 45 ,  easing :  'easeOutQuad' }); 


 show . onStart (( event ) => { 
    console . log ( "Timeline has started." ); 
    console . log ( event ); 
    btnfinished  =  **false** ; 
}); 

**let**  btnfinished  =  **false** ; 

show . onComplete (( event ) => { 
    console . log ( "Timeline has completed playing forwards." ); 
    console . log ( event ); 
    btnfinished  =  **true** ; 
}); 

button . onClick (( event ) => { 
    **if**  (! btnfinished ) { 
        show . play (); 
    } **else**  { 
        show . pause (). reverse (); 
        btnfinished  =  **false** ; 
   });

});