Smooth animation onClick button

I wish the animation would become fluid.
Is that possible?

When i click on the red button the animation seems jerky.

CODE USED:
export function button18_click ( event ) {
$w ( “#box29” ). hide ();
$w ( “#box31” ). show ();
}

export function button19_click ( event ) {
$w ( “#box31” ). hide ();
$w ( “#box29” ). show ();
}

Try this one…

export async function button18_click(event) {
   await $w("#box29").hide();
    $w("#box31").show('fade', {duration:500});
}

export async function button19_click(event) {
    await $w("#box31").hide();
    $w("#box29").show('fade', {duration:500});
}

I am not sure if this will work, but give it a try.

1 Like

Thank you, but doesn’t work.

This is the result:

@info71057
What about this one …?

export function button18_click(event) {
    $w("#box29").hide('fade', {duration:500});;
    $w("#box31").show('fade', {delay: 500, duration:500});
}

export function button19_click(event) {
    $w("#box31").hide('fade', {duration:500});
    $w("#box29").show('fade', {delay: 500, duration:500});
}

In your box you have a pic, right?

@russian-dima

Yes, i have a pic (pizza) inside a box (orange circle)

The result:

Try first to hide the image inside the box, then hide the box itself.
I also have had once such issues with showing and hiding animations.
You will have to be tricky to find the right way of how to manage it.
Yes, i know - → Wix could make it a little bit better, but it is like it is.

Both shown code-examples did help me in some situations.
My las approach would be to try it with . - → setTimeOut(()=>{ }, 1000 );

1000 = milliseconds

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

2 Likes

Thank you so much!

What i have to replace with “app”?
ERROR : " Cannot find name ‘app’ "

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

This is what i have done:

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

// Define the animations
t1.add($w("#box40"), { opacity: 0, duration: 350 });
t1.add($w("#box39"), { opacity: 1, duration: 350 });

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

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

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

@info71057 sorry, my bad, replace it with “animation”.

Well what if they download a pic of pizza and edit it would that work?

No problem :slight_smile:
but when i see the website in preview mode, the animation start without clicking the button.

import wixAnimations from 'wix-animations';

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

// Define the animations
t1.add($w("#box40"), { opacity: 0, duration: 350 });
t1.add($w("#box39"), { opacity: 1, 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('#button24').onClick(() => {
    animation.state === 'hidden' ? animation.play() : animation.reverse();
})


@info71057
Problem has been resolved?

@russian-dima Yes, thanks