Divi Slider module – remove fade-in animation

Aug 16, 2017 | Divi, Wordpress

There are times when I really hate animations, not because they’re not cool, but because they are too repetitive. So having too many elements on the page with the same animations or effects it’s sometimes… borring. For most of Divi’s modules, like Image module, Blurb module or Counter module, those animations can be turned off, but for some, like Slider module, they can’t.
Since the Slider module is the topic here, more exactly images-only sliders, let me tell you my annoyance with it: it’s animation is not uniform. They slide in from the left, but they fade out. So I keep seeing the images sliding in and disappearing. I think I would’ve been happier if the images would slide out too, but maybe I would’ve found something wrong with that too.
The solution is quite simple. Since the animations type are controlled by 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.

After adding a class of .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;
}
So here’s the final result, with a simple and uniform fade animation, which for me looks way better than the default animation.

Of course, this animation can be changed and tweaked a lot, resulting in advanced and fancy animations, but that’s not the purpose here.

Later edit:

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.