Custom Animation Attirbutes

Discussion Ask a question
,
1

So when writing code such as $W(“#element”).show(“fadein”) or .hide(“fadeout”), is there any way I can customize the duration/speed of animation and its delay or direction attributes?

I tried searching for this both in this forum and on the API docus but my keywords did not snag a thing.

Thanks

2

Hey Omid, as far as I know it’s not possible to customize animations via code at the moment.

3

Hi Omid, just half of a solution, but may be enough:
Use the editor animation panel for setting the ‘fade in’ animation with desired delay and duration.
Then, in code, just call ‘show()’ with no parameter.
Seem like it can’t be done for ‘fade out’ at the moment.

Liran.

1 Like
4

Ah, yes, this does seem to actually work. I also noticed items permanently displayed on all pages seem to have the option for “animate for first time only” checked and disabled by default, is there a good reason for that enforcement you can share here while we are on this topic? Otherwise, would you please kindly share my feedback that such enforcement is just not very user friendly nor understandable if one has needs for repeated reanimation of items per HOVER and other Code based and more advanced functions?

Thanks

5

Ah, yes, please consider this for feature developments in this regard. I also am using these functions for a header that only appears upon scroll, but I have no control over the speed with which fade in and fade out occurs as this is a STRIP! and there are no regular animation controls, for even the earlier referenced half measure in this case! Bummer.

6

Hi Omid,

Thanks for the feedback.
In order to keep track with the feature request, can you please post here ?

Thanks,
Liran.

7

Done .

Thanks!

8

Hey guys, I’m stuck here, help somebody? :slight_smile:
So I’m trying to have my menu slide in and out, the menu is a container box with my menu attached to it, inside the box. The box is called #box1
I have a square shape with a menu hamburger icon in it called #shape5
So what I’m trying to do is:
Menu SLIDES IN when mouse hovers a shape and
Menu SLIDES OUT when mouse exits the container box
And here is my code:
export function shape5_onMouseIn(event, $w) {
$w(“#box1”).show(“slideIn”);
}

export function box1_onMouseOut(event, $w) {
$w(“#box1”).hide(“slideOut”);
}

Although the menu slides in very well when I hover shape, when OnMouseOut occurs, the menu doesn’t slide out, it just disappears, without any animation. Poof… no slick slide out.
Anyone knows how to fix this?

By the way here is a website with the feature: www.artbridge.fr

Thanks!

2 Likes
9

Hi jusdopemusic,
It looks like the animation on mouseOut works ok.
Your site looks great!
Roi

10

It might be due to the animation name,

The correct name should be :

SlideIn
SlideOut

The animation names need to be exact.

The SlideIn shows and SlideOut doesn’t, may be because the SlideIn must have been set already from the editor animation panel, as it only affects the “In” animations.

This page has all the animations and their exact name:

1 Like
11

Hello friends,

I am also trying to apply the show (“SlideIn”) and show (“SlideOut”) function, however I would like to choose the direction of the animation. I know you can choose the direction by clicking on Animation and customizing. But even by inserting the code in the onMouseOut property the object simply disappears, not applying the selected effect. How to solve this, because if in show () it was possible to choose the direction, this would be much simpler and the problem would be solved.

Has anyone been through this and managed to solve it?

Thank you all.

12

Hi Oziel,

Is it that you’re using $w(‘#yourelement’).show() for both the SlideIn and SlideOut effect? If so, consider using the .hide(“SlideOut”) function instead for the removal of your element onMouseOut. I’m guessing though that you may have made a typo, or I’m not understanding clearly.

I wasn’t able to get the direction for my SlideOut animation either unfortunately, Wix code currently doesn’t support the option.

1 Like
13

Is there a code for botton to Fade in always on the page load, without mouse over?

14

Hi Nemanja!

You can read about animating your components here .
Hope it helps.

Best of luck!
Doron. :slight_smile:

15

Alright, I have to ask after a while, are we any closer to getting OUTGOING ANIMATIONS via wix code? I have a lot of need for this guys.

16

Hay, we have added support for animation parameters. Checkout the hide and show methods for the details

2 Likes
17

Yoav,

The new feature looks great!! I had a look at the reference document, and I like the new options parameter. I’ll test them out soon to see if they’re truly as good as advertised.

For those of you wondering, we now have the option to add a feature for duration, delay and direction of animations. The reference link is right here → https://www.wix.com/code/reference/$w.EffectOptions.html#

2 Likes
18

Danke my dears!

19

Hi All,

I’m trying the use following code for animation control using EffectOptions for the first time. But its not working can someone please let me know what is wrong with this code.

$w('#chat').show('slide');
let slide = {
 "duration":   2000,
 "delay":      1000,
 "direction":  "right"
};
}

Thanks,
Pawan

20

Hey Pawan

You need to make an adjustment to your code.

w(‘#chat’).show(‘slide’,{ “duration”: 2000, “delay”: 1000, “direction”: “right” });

The effectoptions is to be the second parameter to the show function.