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.

Previous post
Next post

30 Comments

  1. Terry

    Sweet write-up, SJ! And great detective work.

    Reply
  2. Washington

    Would you help me? Where do I change the css to change the effects?

    Reply
    • Richard

      Custom css > Slide Description:
      (or any other element you want affected)

      Simply paste this:

      animation-name: ;

  3. JT

    Thanks for the tip! Is it possible to apply this to the main slide itself, so the background image can slide instead of fade in? For example:

    .et_pb_slider .et_pb_slide {
    animation-name: fadeLeft;
    }

    Reply
    • Richard

      See comment above.

      The easiest way is to use the divi builder > go to your module > Custom CSS > select the element u want affected and insert your code.

    • Richard

      Yes that is possible, see my other comments on this page.

  4. Chris Hobson

    Thanks for this, but where is the CSS that needs to be edited? The custom CSS tab fields are all blank? Apologies, but I’m new to Divi and the CSS options… Thanks

    Reply
    • Stephen

      You would have to style this in your style sheet or epanel. The css options in Divi modules are very limited.

    • Stephen

      Nice work Richard 🙂

    • David Bond

      Thanks for the tips. I do have one question. On page load, the first image still slides in from the left, before the fade animation executes. Is there a way to make the fade animation be the ONLY animation that takes place? Thanks again for the help. Great Work.

    • Alexander

      Cool, thank you 😉

  5. Mei Wei

    Because the images are the star on the home page slider, is it possible to have to text fade out before the image to allow viewing the image alone for a 1-2 seconds longer?

    Reply
  6. lindahhh

    Hey there, building my first divi site (and have some basic css knowledge), and I’d like to turn a “slider” into a “carousel” format (i.e. so slides are visible side by side), but I can’t seem to find an answer to this anywhere – any suggestions on how I could achieve this with a tutorial, plugin, etc? Thanks in advance!

    Reply
    • ubikitus

      or you could just install a plugin like smart slider

  7. NicolAS

    Thanks !!

    Reply
  8. Florian

    Is there away to completely turn the text-sliding-effect off? I just want to have a set text and several images in the background. Right now I have a slide with the same text for each image and the text-effect does not look that great in that context.

    Reply
    • Rotimi

      Go to Advanced CSS>>Slide Description, then insert code below

      animation-name:none;

  9. tengri

    Hello, thank you for this really useful explanation – it works!
    Do you also know a solution for the same animation effect with the portfolio module of Divi?
    By default the title of projects presented in a Portfolio are bouncing up. Is there a way to switch this off?
    Thank you in advance!

    Reply
  10. Mitch

    It really baffles me why this functionality is baked into Divi yet even now they haven’t given these transition effects a GUI to be changed via the Divi Builder 😐

    Reply
  11. Andre

    @ Florian:
    As far as I can see, you can switch animation completely off by using:
    animation-name: none;

    Reply
  12. Chad Barnes

    I purchased Divi Switch and activated Transitions & Filters –> “Slide image & video fly in left” on my https://workhubtyler.com site, but the fullwidth slider located roughly halfway down the page is fading (not sliding) just like it was before. Is there something else I need to do? Thanks!

    Reply
    • Cory Jenkins

      Hi Chad… Can you please open a support ticket regarding this? You can do so by clicking on the “buoy” icon in the lower-right of our website or by sending an email to support@divi.space

      Thanks!

    • Chad Barnes

      Cory, thanks for the help. Support request sent!

  13. Rob

    How can I avoid the fade transition on a fullwidth slider (carrusel ) I just wan them to slide from right to left.

    Thank You.

    Reply
  14. Paula

    Is there any way to turn off the fade animation of the slide description? My client has a full width slider that has the same description, but different video backgrounds, and we’d like the slide description to stay static.

    Reply
  15. Julie McCoy

    Thanks Stephen, I am using fadeIn but I would actually like to cross-fade from one background image/slide to the next. Is there a way to do this? Cheers.

    Reply
  16. Sebastian

    I’m sorry, but for me this isn’t working. Doesn’t matter where I put the code, the transition of the slider always stays on fade. I use the fullwith slider with only background images in the slides.

    Reply
  17. Marco

    Hello, can i remove the white transition between one slide and next slider?

    Reply
  18. Mindee

    Thanks for this – when I put it in I get errors… “Expected RBRACE.” and “Unexpected token ‘}’. Is there more CSS I need to make it work?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.