When you first view a Divi Theme slider, the slider image will "slide in" from the left. If you don't want this slide in effect on your slider images, you can disable it with the following CSS:
.et_pb_slide_image, .et_pb_slide:first-child .et_pb_slide_image img.active { -webkit-animation-duration: 0s !important; animation-duration: 0s !important; }
I've added an option into my Divi Booster plugin to disable the slider "slide in" effect:
the following code works on all other slides except the first, why is this?
animation-name:fadeIn;
-moz-animation-duration: 0.1s;
-ms-animation-duration: 0.1s;
-o-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
The first slide always defaults to the shitey slide in… your disable slide just causes it to pop-in which is also not a good fix
Hey Burrito,
it looks like you're applying animation-name, etc, to the div wrapping the slide img tag, but it's being overridden on the first slide by the "fadeLeft" animation-name set on the img tag directly (by Divi, I think, using the selector ".et_pb_slide:first-child .et_pb_slide_image img.active"). You should be able to fix it by adding this:
Hope that helps!
Hey Dan
Do you just add your CSS to the slider module settings under 'Main element'?
Have done this but it's not working. My fault I'm sure.
Mick
Placed your code under 'slide image' but still not working
Hi Michael, the code won't work in the Divi Module Custom CSS tabs as those boxes only take CSS properties, not full CSS code (as given in this post). You should add it via either the Custom CSS box in the theme options, the Custom CSS box for the page you're working on, or in the style.css of your child theme (if you're using one). This post explains in a bit more detail:
https://divibooster.com/adding-css-to-the-divi-theme/
try this it worked for me.
.et_pb_section, .et_pb_section *{
animation:none !important;
opacity: 1 !important;
}
Thanks for sharing, sam! It's worth noting for anyone trying this that it will disable all animations within all sections on the pages it is applied. Similarly, it will override the opacity of all elements within these sections. That may not be an issue in many cases, but worth being aware of. Thanks again!
Thanks! This is the solution I was looking for….
I apply only for the description class and works very well.
I love your plugin! Thank you! Strange that this isn't already a toggle. I'm interested in eliminating the slide in effect in an image gallery. It seems like that if they were to pick a default effect it would be something more sublet like a fade in.
Hey David. Yeah, I'm surprised there isn't an option to disable this within Divi itself. Anyway, I've just updated Divi Booster to add an option for it (under "Modules > Gallery"). Hope that helps!
Oh, and here's a link to the post with the CSS for the fix, if you need it:
https://divibooster.com/disable-divi-gallery-image-slide-in-effect/
where should I put this css, I have tried all sections of "custom css" but it's not stopping the animation!
This URL may not work after Monday 11th October 2015:
http://diarybooker.johnvdenley.com.gridhosted.co.uk/
Hi John, the code won’t work in the Divi Module Custom CSS tabs as those boxes only take CSS properties, not full CSS code (as given in this post). You should add it via either the Custom CSS box in the theme options, the Custom CSS box for the page you’re working on, or in the style.css of your child theme (if you’re using one). This post explains in a bit more detail:
https://divibooster.com/adding-css-to-the-divi-theme/
Eu te amooooo kkk
Você não imagina o "quanto" eu procurei por isso… não estava conseguindo sozinha.
Muito, muito, muito obrigada! :)
OOps, I thought I was talking to Nick!
I just bought your booster because I could NOT reduce the padding around a section — Even though I tried to use negative numbers! Your advantage!
WHY is this a CSS fix? Everything else like this is toggle. PLEASE change this in the next update. It makes NO sense to keep this change as a coding decision. No sense.
Hey Randy, I'm with you on this – having this as a toggle is something that I'd like to see as part of the Divi Theme core – hopefully Elegant Themes have it in the pipeline…
My Divi Booster plugin has an option to disable the slide in on a site-wide basis, but it would be good to be able to set this on a slider by slider basis without the need for code.