Skip to main content

Adding custom CSS transitions for elements in slides

There is a lighter alternative to "animated blocks" feature (if you don't need animations in old IE, or if you need some advanced transitions).

First of add addActiveClass:true option to slider init code (in WordPress version the option is in "Misc" section and is called "Current CSS class"). The current slide will now get rsActiveSlide class and you may use this to apply any styling to elements of the current slide.

For example, if you want to animate text color of the element with class your-element.

.rsSlide .your-element {
color: white;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.rsSlide.rsActiveSlide .your-element {
color: red;
}

Learn about CSS transitions at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions