Smooth animation onClick button

Ask the community
,
7

Hi Andrea :raised_hand_with_fingers_splayed:

The show() and the hide() functions return promises, which means if you click fast enough you can easily skip the hide or the show animation, you can use animation APIs instead.

Start by importing the animations module and creating a timeline for each box:

import wixAnimations from 'wix-animations';

// Initialize the timelines;
const t1 = wixAnimations.timeline();
const t2 = wixAnimations.timeline();

// Define the animations
t1.add($w("#hidden"), { opacity: 0, duration: 350 });
t2.add($w("#shown"), { opacity: 0, duration: 350 });

// Hide the box that should be hidden by default.
t1.play();

// Initialize animations
const animation = {
    state: 'hidden',
    play: () => {
        t1.reverse();
        t2.play();
        animation.state = 'shown'
    },
    reverse: () => {
        t1.play();
        t2.reverse();
        animation.state = 'hidden';
    }
}

// Define an event handler
$w('#plusSign').onClick(() => {
    animation.state === 'hidden' ? animation.play() : animation.reverse();
})

And that’s it, enjoy!
Ahmad