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