How do I change the transition duration of a fade animation on a gallery slide?

Ask the community
1

How do I change the transition duration of a fade animation on a gallery slide?(Editor X)
Changing the duration not work with the settings shown in the following images.
I want to slow down the speed of the fade animation,
not the stop time per image.
However, if it is possible to further change the stop time for each piece, please let me know the code too.

Can I write code in Velo to change for these things?
I am a complete beginner in javascript.
Please, someone help me!

932×1180 146 KB

890×1012 135 KB

2

Hey @chiboede , Was going through the settings and you are correct with the slideshow speed being for the time within images and the playback speed ( like the x0.25 ) is for the Video settings. I don’t see an option for the timing of the fade so will forward the feedback to the team.

From checking the Velo API, I don’t see Pro Gallery has an open API that can be used so don’t think using coding would help. However, we did open Multi-State Boxes so you may be able to use some code to make your own slideshow. Jonathan made a great video example of a slideshow:

3

Hi, how can you introduce a ‘fade in’ for the images to appear?
I have implemented it and it’s working but, I’m struggling to introduce a transition when the background images appears. There’s a ‘step’ happening when the State change, I’d like to have a ‘smooth’ transitions, and as well there’s no navigation control. Please create a tutorial somewhere for this as it’s impossible to find anywhere.
I tried this :

$w . onReady ( function () {
var states = [ ‘state1’ , ‘state2’ , ‘state3’ ];
var stateNumber = 0 ;

**function**  slideShow () { 
    $w ( '#multiStateBox1' ). changeState ( states[stateNumber ]); 
    **if**  ( stateNumber  <  states.length  -  1 ) { 
        stateNumber ++; 
    }  **else**  { 
        stateNumber  =  0 ; 
    } 
    setTimeout ( slideShow ,  6000 ). ease ;

$w ( “#state1” ). show ( “fade” );
$w ( “#state2” ). show ( “fade” );
$w ( “#state3” ). show ( “fade” );

} 
slideShow ();

});

but doesn’t work. :frowning:

4

Any idea @jonathant if/how fading can be added to a slideshow?

5

@uliana-andrea @Rob Fade in animation can be set using the built in Wix Entrence Animations through the floating panel.
You can control the duration and delay of the animations as well.

6

Thanks Jonathan. A case of overthinking the situation and forgetting the setting is there. :joy:

7

I see what you mean, I tried, with different transitions, but it doesn’t fade between the images, the next image always start from 100% white background to then appears with the specific animation.
It would be good to have a fade in- fade out, and maybe some arrow to navigate, better dots as well.

8

Can you share the url or a video to see what you mean exactly?
If you have a background you can just remove the Multi State Box background to 0% and each state’s background 0% as well.

9

Hi, thanks for your replay,
this is a fade transition between the two images background. They don’t start from a white state.
http://welloydproperties.com/html5/templates/animated-blocks/

10

Unfortunately, all the elements have 0% in the background.

2288×588 119 KB

from my research this is what I got:

You should be able to use onChange to do whatever animation you want. onChange - Velo API Reference - Wix.com Then you can do a quick hide and show of the multistatebox. https://www.wix.com/velo/reference/$w/multistatebox/hide show - Velo API Reference - Wix.com

but then I don’t know how to edit the code properly.

Plus. the client asked me arrow navigation that should be something like:

''code
rightSliderBtn.onClick(()=>{slideRight();})
leftSliderBtn.onClick(()=>{slideLeft();})
''code