Duration in animation

Ask the community
,
1

I was wondering if I could set a duration for my animations with code. I really need this feature. Could someone give me a link to an article for this?
my code.

export function box_click(event) {
    $w("#boxBig").show('fadeIn');
    }

Arthur

2

Hi!

You can indeed set the duration of your effects when using Corvid.

You can set the fade custom options as a variable and then call that variable within the show() function. You are also using an invalid effect name value in your code. It should be “fade” not “fadeIn”.

The example below will get you the effect that you are looking for.

let fadeOptions = {
 "duration": 2000,
}

$w.onReady(function () {

});

export function button1_click(event) {
    $w("#box1").show("fade", fadeOptions);
}

You must set the duration in milliseconds.

You can also see a list of other effect options you can use with the show() function here.

You can also check out the wix-animations API.

Hope this helps!

Dara | Corvid Team.

3

Thank you so much! You are truly a life saver. Just 1 more question. Is it possible to set the direction of the animation. For example, for the slide-in effect, could it be possible to set the direction of the animation?
Arthur

4

Hey Arthur,

Yes you can set the direction of a slide. You can do so like this:

const slideOptions = {
 "direction": "right"
}

$w.onReady(function () {

});

export function button1_click(event) {
    $w("#box1").show("slide", slideOptions);
}

You can also set the direction to left, top and bottom, but left is the default direction.

To see all the effect options you have for each effect you can go to the link about the show() options I sent earlier and then click on “effectOptions” in the show Parameters box.

I hope this helps!

Dara | Corvid Team

5

@ Question: How do you create this animated gifs? Which software do you use for it?

6

Thank you so much!

7

We were talking about animating elements with code. You can make your animated GIF here: https://giphy.com/create/gifmaker .
Arthur