You’d think it would be the same as adding text to a div, but unfortunately it’s not. If left as-is, it’ll work on the very first slide, but not any of the others, because the script doesn’t know that it changes to become visible in a different way than scrolling does.
How To
To start, follow the instructions for how to set up animation on a normal div. Then, continue on with the next steps.
This script will go within your sliders.js. You’ll only want it to happen on the published page, not in the editor. Update the lines that include beforeChange and afterChange to use the names of the slider(s) you’re working with.
var slideItems = $('.slick-active .wow');
addSlideAnimation(slideItems);
function addSlideAnimation (slideItems) {
slideItems.each(function(i, el) {
var el = $(el);
el.removeClass("fadeOut");
el.addClass("animated");
el.addClass(el.attr('data-wow-animation'));
el.css({
'visibility':'visible',
'-webkit-animation-duration': el.attr('data-wow-duration'),
'animation-duration': el.attr('data-wow-duration'),
'-webkit-animation-delay': el.attr('data-wow-delay'),
'animation-delay': el.attr('data-wow-delay'),
});
});
}
$('.hero-wrapper .hero-text, .hero-wrapper .hero-images-large, .hero-wrapper .hero-images-small').on('beforeChange', function(event, slick, currentSlide){
var slideItems = $('.slick-active .wow');
slideItems.each(function(i, el) {
var el = $(el);
el.addClass('fadeOut');
el.removeClass(el.attr('data-wow-animation'));
});
});
$('.hero-wrapper .hero-text, .hero-wrapper .hero-images-large, .hero-wrapper .hero-images-small').on('afterChange', function(event, slick, currentSlide){
var slideItems = $('.slick-active .wow');
addSlideAnimation(slideItems);
});
Example Sites
- Limestone Bank (2020 remake) (Good, current BS4 example)
- Renasant Bank (BS2 example; no longer our site so pull from UAT)
- Craft Bank (Particularly intense BS4 example because it also includes the potential for color changes)
Tags: bs2,bs3,bs4,js, javascript, script, animation, anchor