Have hero button appear/fade in instead of fly in

because you only have one slide in that slider –
1) the simple way would be to setup under the alb itself on advanced tab the slider-animation – Slideshow Transition to fade. Because the animation of the caption is correlated to the slide animation –
then there will be no animation: caption-left – it is then changed to : caption-top

________

If there were multiple slides – and you like to preserve the slide animation on the slides – you can set a different animation for it:

/*** for fullwidth sliders - That is your case***/
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_slideshow_full .active-slide .avia-slideshow-button {
 -webkit-animation: avia-fadein 1.5s 1 ease-out !important;
 animation: avia-fadein 1.5s 1 ease-out !important;
}

/*** for fullscreen sliders ***/
.avia_transform .av_fullscreen .active-slide .avia-caption-title,
.avia_transform .av_fullscreen .active-slide .avia-slideshow-button {
 -webkit-animation: avia-fadein 1.5s 1 ease-out !important;
 animation: avia-fadein 1.5s 1 ease-out !important;
}

if you only want to change it for a specific slider – then a custom-class would be the way to go:
( f.e. caption-fader ):

/*** for fullwidth sliders - That is your case***/
.avia_transform .av_slideshow_full.caption-fader .active-slide .avia-caption-title,
.avia_transform .av_slideshow_full.caption-fader .active-slide .avia-slideshow-button {
 -webkit-animation: avia-fadein 1.5s 1 ease-out !important;
 animation: avia-fadein 1.5s 1 ease-out !important;
}

/*** for fullscreen sliders ***/
.avia_transform .av_fullscreen.caption-fader .active-slide .avia-caption-title,
.avia_transform .av_fullscreen.caption-fader .active-slide .avia-slideshow-button {
 -webkit-animation: avia-fadein 1.5s 1 ease-out !important;
 animation: avia-fadein 1.5s 1 ease-out !important;
}

______________________________________________________________________________
here is the alternative solution with that custom class.
the caption-top animation is with a little movement of the captions:

/*** for fullwidth sliders ***/
.avia_transform .av_slideshow_full.caption-fader .active-slide .avia-caption-title,
.avia_transform .av_slideshow_full.caption-fader .active-slide .avia-slideshow-button {
 -webkit-animation: caption-top 0.5s 1 ease-out !important;
 animation: caption-top 0.5s 1 ease-out !important;
}

/*** for fullscreen sliders ***/
.avia_transform .av_fullscreen.caption-fader .active-slide .avia-caption-title,
.avia_transform .av_fullscreen.caption-fader .active-slide .avia-slideshow-button {
 -webkit-animation: caption-top 0.5s 1 ease-out !important;
 animation: caption-top 0.5s 1 ease-out !important;
}

• This reply was modified 2 years, 8 months ago by Guenni007.

you can try:

/*** for fullwidth sliders ***/
.avia_transform .av_slideshow_full .active-slide .avia-caption-title,
.avia_transform .av_slideshow_full .active-slide .avia-slideshow-button {
    -webkit-animation: unset !important;
    animation: unset !important;
    opacity: 1 !important;
    transition: none !important;
    visibility: visible !important;
}

if there is a custom-class on that alb – it will be as you can see above on av_slideshow_full