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.

s

Update:

Due to Divi’s new features added in the updates released after this post was written, this post is now obsolete. The animations can be now controlled via Design tab of the modules.