Removing Caption Animation From Full Width Easy Slider - Support

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 12, 2015 at 10:02 am #502035

GlenCoffey
Participant

Hi,
I want to remove any animation effects on the caption of the full width slider. I can’t find any animation effects
Also there is an issue when the screen is resized the caption disappears when it switches from desktop -> mobile & mobile -> desktop.

thanks in advance!
Glen

September 12, 2015 at 10:03 am #502036

GlenCoffey
Participant

Sorry I cant find any animation elements for the caption in the shortcodes.js so Im not sure where else the animation may be generated from.

September 12, 2015 at 11:03 am #502062

GlenCoffey
Participant

Hi I fixed it,
I simply removed the animation in the css. However Id love it if the caption can fade in with the image. Right now, it just appears after the image, so the effect isn’t very nice.

Can I add the class to the function that creates the image fade in?

Regards,
Glen

September 12, 2015 at 2:14 pm #502092

GlenCoffey
Participant

The issue with the caption disappearing on window resize is still happening when it switches from desktop to mobile (767px). Id love a solution to this!!

Regards,
Glen

September 14, 2015 at 6:42 am #502491
Ismael
Moderator
Hi!

Thank you for using Enfold.

Add this in the Quick CSS field to create a simple fade in effect:
```
.slideshow_caption {
	animation-name: opac;
	animation-duration: 0.5s;
}

@keyframes opac {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
```
Cheers!
Ismael
April 18, 2016 at 1:26 pm #616431

sky19er
Participant

That css looks hopeful, but it’s not working for me — I’m still getting the slide-in effect. I have it implemented here, for example: http://ff3.762.myftpupload.com/about/introductory-profile/ — anything else you can suggest? Thanks!

April 20, 2016 at 6:29 am #618003
Ismael
Moderator
Hey!

Set Caption Positioning of the slider to default (Bottom without frame) then replace the css code with this:
```
.slideshow_caption {
	animation-name: opac;
	animation-duration: 3s;
}

@keyframes opac {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-content, .avia_transform .av_fullscreen .active-slide .avia-caption-content {
    visibility: visible;
    -webkit-animation: none;
    animation: none;
}

.avia_transform .av_slideshow_full .active-slide .avia-caption-title, .avia_transform .av_fullscreen .active-slide .avia-caption-title {
    visibility: visible;
    -webkit-animation: none;
    animation: none;
}
```
Best regards,
Ismael
April 20, 2016 at 1:34 pm #618290
sky19er
Participant
That worked — thanks! Don’t feel obligated to answer this, but, if you feel like it ;) The animation seems to sort of snap in and the slowly fade in — like a drastic easing-out. I looked up some ease-in css, but it doesn’t really help much — do you know how to get a nice, soft ease-in effect?

Here’s what I have now at http://ff3.762.myftpupload.com/about/introductory-profile/ :
```
.slideshow_caption {
	animation-name: opac;
	animation-duration: 3s;
	animation-timing-function: ease-in;
	-webkit-animation-timing-function: ease-in;
}
```
Thanks! (but again, don’t feel obligated)
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Removing Caption Animation From Full Width Easy Slider’ is closed to new replies.