Changing the standard Divi slider transitions

Changing the standard Divi slider transitions

The default slider module that comes with Divi is pretty cool and for the most part, it does the job. If, however, you have used a third party slider before you may notice that it has a distinct lack of je ne sais quoi (that’s French for transitions ;)).

By default, there are two slider transitions happening in the slider.

1. The slider description fades up.

2. Any slide images fade in from the left.

You can see both at play in this video:

The two animations are being controlled by two key-frames called ‘fadeLeft’ and ‘fadeBottom’ but these are only two of a whole bunch of key-frames being used throughout Divi. You can change the slider so it uses different animations with a bit of CSS. But first, here’s a list of those animations:

fadeLeft
fadeBottom
fadeInLeft
fadeRight
fadeInRight
fadeOutRight
fadeInTop
fadeOutTop
fadeOutBottom
fadeOutLeft
fadeTop
fadeInRight
Grow
fadeIn
slideWidth
gridFadeIn
flipInX
flipInY

Changing the description transition

 

 

.et-pb-active-slide .et_pb_slide_description {
 animation-name: fadeBottom;
}

All you have to do is replace the ‘fadeBottom’ text with whichever transition you’d like to use from the list above.

Changing the side image or video transition

.et-pb-active-slide .et_pb_slide_image, .et-pb-active-slide .et_pb_slide_video {
 animation-name: fadeLeft;
}

Same concept as above, just change the animation name for whichever one from the list above you want to try.

 Be sure to add the relevant browser prefixes etc.

I hope you find this useful.

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.