When we try to run this code, we get a and infinite loop, "Uncaught TypeError: Cannot read property 'replace' of undefined", how to make this work. Our code is the same with just added timeline. Just cannot find the error, see below, thanks!
$(document).ready(function(){
$(".hover-bg-img").each(function(index, element){
var tl = new TimelineMax({paused:true});
// var elContainer = $(this).find('.hover-bg-img');
var elBlendBox = $(this).find('.btn-hover-blurb .blend-mode-box');//
var elTitle = $(this).find('.btn-hover-blurb h5');//
var elBlurb = $(this).find('.hover-bg-img p');//
var elBtn = $(this).find('.btn-hover');//
var elBlurbBtn = $(this).find('.btn-hover-blurb .btn');//
var elDash = $(this).find('.btn-hover-blurb .dash');//
// var elContainerImg = $(this).find('.hover-bg-img img');
// create tweens for timeline
tl.to(elBtn, 0.1, { display: 'none', ease: Power2.easeOut });
tl.from(elBlendBox, 0.25, { width: 0, ease: Power2.easeOut }, 'start');
tl.from([elTitle, elBlurb], 0.2, { autoAlpha: 0, x: -20, ease: Power2.easeOut }, 'start+=0.3');
tl.from(elBlurbBtn, 0.25, { autoAlpha: 0, y: 5, ease: Expo.easeInOut }, 'start+=0.4');
tl.from(elDash, 0.25, { width: 0, ease: Expo.easeInOut }, 'start+=0.4');
// add your timeline tweens here
//.....
//....
element.animation = tl;
});
$(".hover-bg-img").hover(over, out);
function over(){ this.animation.play() };
function out(){ this.animation.reverse() };
});
