Tie timeline animation to id via data attr

[catchtwnenty2]

I am using gsap to play a little animation. It is the same animation for different hovers. I am trying to tie the animation so that it runs on a specific hover only. So when I hover over data-filter="one" the animation only runs on li id-one"

 

You need to scroll down the codepen to see what I am getting at

Many thanks to all help - greatly appreciated

See the Pen eaLLxe by struthy (@struthy) on CodePen

[mikel]

Hi @catchtwnenty2,

 

You have to consider the corresponding object in the animation.
Look at this example:

 

See the Pen Nvdvry by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[catchtwnenty2]

thnk you - I got it working

 

//// please refactor me
function escHover() {
  var fadeIn = $('.filter-fade-img');
  var hoverBtn = $('.filter-hover');

  TweenLite.set(fadeIn, {
    opacity: 0,
    y: '50px',
    ease: Back.easeOut
  })
  hoverBtn.on('mouseenter', function(e) {
    var fadeIn = $(this).attr('data-filter');
    var fadeIn = $('#' + fadeIn).find('.filter-fade-img');
    console.log(fadeIn);
    TweenMax.to('.js-filter-esc-dormant', 0.1, {
      y: '0',
      opacity: 0
    }, 0.1, "+=0.1");
    TweenMax.staggerTo(fadeIn, 0.5, {
      y: '0',
      opacity: 1
    }, 0.2, "+=0.1");
  });

  hoverBtn.on('mouseleave', function(e) {
    var fadeIn = $(this).attr('data-filter');
    var fadeIn = $('#' + fadeIn).find('.filter-fade-img');
    console.log(fadeIn);
    TweenMax.staggerTo(fadeIn, 0.5, {
      y: '50px',
      opacity: 0
    }, 0.1, "+=0.1");
    TweenMax.to('.js-filter-esc-dormant', 2, {
      y: '0',
      opacity: 1
    }, 8, "+=8");
  });
}