Animation Duration

Ask the community
,
1

Can someone show me how to speed up the FadeIn animation?

$w(“#headerTransitionPoint”).onViewportLeave(() => {
$w(“#scrollingHeaderStrip”).show(“FadeIn”);
$w(“#defaultHeaderStrip”).hide(“FadeOut”);
})
$w(“#headerTransitionPoint”).onViewportEnter(() => {
$w(“#defaultHeaderStrip”).show(“FadeIn”);
$w(“#scrollingHeaderStrip”).hide(“FadeOut”);
})
});

2

See the hide() and show() APIs for the available Effects and the duration and delay parameters. Also, look at Collapse for additional possibilities.

3

I am not the most skilled coder. Can you be more specific please? Thanks for responding.

4

If you click the links he has given you will the sample code like I have written below

let fadeOptions = {
  "duration": 2000,
  "delay": 1000
};

$w("#myElement").hide("fade", fadeOptions);

In the above code, we are using a “fade” animation and the “fadeOptions” parameters are telling the element how long to stay in animation (duration) and how long to delay the animation start after the page loads.

5

$w(“#headerTransitionPoint”).onViewportLeave(() => {
$w(“#scrollingHeaderStrip”).show(“FadeIn”); let fadeOptions = {
“duration”: 0,
“delay”: 0
};
$w(“#defaultHeaderStrip”).hide(“FadeOut”);
})
$w(“#headerTransitionPoint”).onViewportEnter(() => {
$w(“#defaultHeaderStrip”).show(“FadeIn”);
$w(“#scrollingHeaderStrip”).hide(“FadeOut”);
})
});

i tried this it didnt change. Can you add it onto the code? I am not a coder at all. I just copy and paste lol.

6

The minimum you can do is copy and paste from the documentation itself and then make the necessary changes, as it is very clear on this.

7

I did that. That is 100% why I am returning back here. It is very clear as it is stated in the first sentence: " I tried this it didn’t change."

8

Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want. Wix provides many resources to help users learn and get the most out of Corvid. We encourage users to take advantage of these resources which include video tutorials, full app examples (which can be loaded into the user’s editor), API documentation, and a wealth of articles describing a wide range of topics - from beginner to advance.

You may want to check out the WixArena - it’s a hub where you can look for Corvid (and other) experts for hire.

9

I agree with Husni, for some reason when you establish fadeOptions it does not affect the animation duration, it cuts it out. If you have an example working code would be great

10

When does it cut out? Share your code, explain what you are trying to do, what works, and what doesn’t.

11

See the hide and show APIs for sample code.

12

Drop the stuff starting with “let” after this stuff: $w . onReady ( function () {

Then in your code, after fade put fadeOptions like I did below.

This worked for me

$w . onReady ( function () {
let fadeOptions = {
“duration” : 100 ,
“delay” : 0
};

$w ( “#Headertransitionpoint” ). onViewportLeave (() => {
$w ( “#Headerwithlogo” ). show ( ‘fade’ , fadeOptions );
$w ( “#Defaultheaderstrip” ). hide ( ‘fade’ , fadeOptions );
})
$w ( “#Headertransitionpoint” ). onViewportEnter (() => {
$w ( “#Defaultheaderstrip” ). show ( ‘fade’ , fadeOptions );
$w ( “#Headerwithlogo” ). hide ( ‘fade’ , fadeOptions );
})
});

13

$w . onReady ( function () {
let fadeOptions = {
“duration” : 100 ,
“delay” : 0
};

}

);

export function text3_mouseIn ( event ) {
$w ( “#box1” ). show ( ‘SlideIn’ , fadeOptions );
}

What am I doing wrong ?

14

@shantanukumar847 Wix code SDK Warning: The “show” function called on “A” was executed without the specified effect options because it was called with the following deprecated effect: “SlideIn”. Read more about effects: “HiddenMixin - Velo API Reference - Wix.com”

15

I agree as well, not able to get it to work

16

@yisrael-wix $w . onReady ( function () {
}
);

let fadeOptions = {
“duration” : 100 ,
“delay” : 0
};

export function text3_mouseIn ( event ) {
$w ( “#A” ). show ( “SlideIn” , fadeOptions );
}

export function text3_mouseOut ( event ) {
$w ( “#A” ). hide ( “SlideOut” , fadeOptions );
}

17

@yisrael-wix this code is creating a unwanted gap between wixlocation and hide(fadeout)
i want my columstrip to fade out (dissolve) and there should be content of home page on its bg

check this website on phone only https://bit.ly/2Xvc1W2
i want same feature same animation like above link->>>>> only i want to add customized image (Larger size) n text on that screen and which will load only once per session or wont load again if we come back to that page

import wixAnimations from ‘wix-animations’ ;
import wixLocation from ‘wix-location’ ;
import wixWindow from ‘wix-window’ ;

let timeline = wixAnimations . timeline ();
const fadeOptions = {
“duration” : 200
};
const fadeOptions2 = {
“duration” : 1400
};
$w . onReady ( function () {
wixLocation . to ( ‘/home’ ), fadeOptions2 ;
const myImage = $w ( “#image1” );
timeline
. add ( myImage , {
“opacity” : 0 ,
“duration” : 900
})
. onComplete (() => {
$w ( “#image1” ). hide ( “FadeOut” , fadeOptions )
$w ( “#columnStrip19” ). hide ( ‘FadeOut’ )
}). play ();
});

18

@gokul1311 Your syntax is probably giving you errors. Also, if you’re trying yo accomplish a fade effect, you should be using the “fade” api, not ‘SlideIn’.

The line should be written as:

$w('#box1').show("fade", fadeOptions);

Be careful placing your quotations. Also, I would recommend using a duration of 300 or more for the fade effect for it to be more smooth. Hope this helps.

19

Normaly this post is an old one and should already have been closed a long time ago.
But since you provided your last post, i want to do some corrections on your descriptions.

“fade” → is not an API it’s just the —> ANIMATION-TYPE

More information about this topic, you will find here…
https://www.wix.com/velo/reference/$w/accountnavbar/show

682×1229 36.4 KB