[Fire elements animation on hover in each element]

Got it! The issue here was this line:

 

tl.from([elTitle, elBlurb], 0.2, { autoAlpha: 0, x: -20, ease: Power2.easeOut }, 'start+=0.3');

 

I guess you cannot call multiple elements to animate on same line?

[Fire elements animation on hover in each element]

What? I don't even understand what this got to do, its the same code from above example with new tweens

[Fire elements animation on hover in each element]

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() };
});