Change the Divi slider module transitions

The default Divi slider transitions (as seen in example 1 below) is for the text content and button to fade/slide up from the bottom, with the slide image fading/sliding from the left

By adding the following code into your slider modules custom CSS boxes for SLIDE DESCRIPTION (.et_pb_slider .et_pb_slider .et_pb_slide_description) and SLIDE IMAGE (.et_pb_slider.et_pb_slider .et_pb_slide_image), you can change the slider content transitions.

There are quite a few options for transitions in Divi but from what i can see, the transitions below can be used for the slider module. Just copy and paste any of the following code into the SLIDE DESCRIPTION and/or SLIDE IMAGE custom CSS sections.

animation-name:fadeIn;
animation-name:fadeTop;
animation-name:fadeLeft;
animation-name:fadeRight;
animation-name:fadeBottom;
animation-name:fadeInTop;
animation-name:fadeInLeft;
animation-name:fadeInRight;
animation-name:fadeInBottom;
animation-name:flipInX;
animation-name:flipInY;

1. Default Divi Slider

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

2. Fade In Left

SLIDE DESCRIPTION – animation-name:fadeInLeft;
SLIDE IMAGE – animation-name:fadeInLeft;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

3. Flip In X

SLIDE DESCRIPTION – animation-name:flipInX;
SLIDE IMAGE – animation-name:flipInX;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

4. Fade In Left + Fade In Right

SLIDE DESCRIPTION – animation-name:fadeInLeft;
SLIDE IMAGE – animation-name:fadeInRight;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

4. Fade In Left + Fade In Right

SLIDE DESCRIPTION – animation-name:fadeInLeft;
SLIDE IMAGE – animation-name:fadeInRight;

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

DIVI SLIDER HEADING

This is the Divi slider module and we are customizing the slider transitions using CSS in the modules custom CSS tab.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close