How to create fade-in animation with code??

Ask the community
,
1

My goal for the mobile version of this Editor X site ( https://bdarienjr.editorx.io/1209 ) is to recreate the float-in animation from the standard (non-code) wix animations. The reason for this is that the standard wix animations automatically is triggered by page load/view - I need mine to respond to the click of a menu button. So far, I have created almost exactly what I want, except for the text does not fade in (see screen recording below). I can get the text to fade out by setting the animation opacity to 0, however, not the other way around.

What do I need to do in order to get it to fade in??

Also, I would like to trigger this function every time the menu button is clicked , resetting when the “X” icon is clicked. I attempted this but it did not work - any guidance on how to do this as well?

Here is my code:

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline();

$w.onReady(function () {

 const target1 = $w('#menuButton1');
 const target2 = $w('#menuButton2');
 const target3 = $w('#menuButton3');
 const target4 = $w('#menuButton4');
 const target5 = $w('#menuButton5');
 const target6 = $w('#menuButton6');
 const target7 = $w('#menuButton7');
 const target8 = $w('#menuButton8');

    $w('#menuIcon').onClick(() => {

        timeline
            .add(target1, {x:60, duration: 400, delay: 200, easing: 'easeOutCirc' })
            .add(target2, {x:60, duration: 400, delay: 300, easing: 'easeOutCirc' }, 0)
            .add(target3, {x:60, duration: 400, delay: 400, easing: 'easeOutCirc' }, 0)
            .add(target4, {x:60, duration: 400, delay: 500, easing: 'easeOutCirc' }, 0)
            .add(target5, {x:60, duration: 400, delay: 600, easing: 'easeOutCirc' }, 0)
            .add(target6, {x:60, duration: 400, delay: 700, easing: 'easeOutCirc' }, 0)
            .add(target7, {x:60, duration: 400, delay: 800, easing: 'easeOutCirc' }, 0)
            .add(target8, {x:60, duration: 400, delay: 900, easing: 'easeOutCirc' }, 0)
            .play();

    })

    });
    
    //  $w('#closeIcon').onClick(() => {

//      const reset = {y: 0, x: 0};

//      timeline()
//          .add(target1, reset)
//          .add(target2, reset, 0)
//          .add(target3, reset, 0)
//          .add(target4, reset, 0)
//          .add(target5, reset, 0)
//          .add(target6, reset, 0)
//          .add(target7, reset, 0)
//          .add(target8, reset, 0)
//          .play();

//  })

//});

Here is how my code behaves: