animation-name CSS declaration, and in the case above it’s animation-name: fadeLeft;, it was just logical to use animation-name: none;. But since the animation names have to be defined first, any other name that was not declared could have worked in removing the fadeLeft animation.
I then decided that a bit of animation is actually needed, and a simple fade will suit my needs.
.animation-fade to the module itself, my CSS looks like this:
.animation-fade .et_pb_slide_image,
.animation-fade .et_pb_slide:first-child .et_pb_slide_image img.active {
-webkit-animation-name: fade;
-moz-animation-name: fade;
-ms-animation-name: fade;
-o-animation-name: fade;
animation-name: fade;
}Of course, this animation can be changed and tweaked a lot, resulting in advanced and fancy animations, but that’s not the purpose here.
Removing the transition completely would be possible with some fancy JavaScript, but it really doesn’t worth the trouble. Because the fade transition is done by JavaScript gradually changing the opacity, using animation: none; won’t work. One alternative would be to make the active slide fully opaque from the start, using
.animation-fade .et_pb_slide_image,
.animation-fade .et_pb_slide {
opacity: 1 !important;
}
This makes all slides fully opaque, but the inactive slides also have display: none; while they’re inactive, so won’t be visible. When they become active, JavaScript replaces it with display: block;, making the active slide visible. However, that happens slightly before the active slide to become inactive, in order to the fade animation to take place, so for a very short time, 2 layers will be visible. That will be noticeable (and annoying) if the slides images are not the same size, like in the example slides. So keep that in mind when using this method.
Thanks for the article. How would you remove the fade completely?
That’s a tricky one. The fade animation is done via JavaScript that gradually changes the opacity of the slides. Setting
animation: none;won’t help in this case. What you could to to use is:.animation-fade .et_pb_slide {opacity: 1 !important;
}
but be careful to use images of the same size, otherwise some parts of the next image will be visible under the active image when the next one is bigger.
I’ll add an example.
Thank you, this is so helpful. When you have words over top of the slide images, they also animate upwards, and I fixed that by doing `animation: none` to that – thank you for the idea!
Glad you figured it out. 🙂
Hi, where i have to put inside the code?
Thanks
Hello, Matteo.
You can put the code either in Divi’s Custom CSS, either in your child theme’s style.css file, either in a code module in the same page as the effect you want removed. The first 2 options works sitewide, the last only on the page you add it to.
Exactly what I needed, thx m8!
“so for a very short time, 2 layers will be visible”
Add a bg color to every image and it will look fine
Hello, Stefan.
Glad to be of help.
Adding background color (to any slider element, not only to image) will not work because image container height is based on the image itself, not on the slider, so the next image will still be visible.
However, this is already way past this article’s scope and purpose and I don’t want to overcomplicate things even further. This may come as a separate, more advanced article sometimes in the future, but it also may not, my time is very limited as it is, that’s why I haven’t added any new content in a long time. But, if you get to a working solution and you want to share it, I’ll be happy to update this article.