Pause certain "tl" on hover in case of multiple timelines

[Arpi]

Hello my Dear Gsap team,

 

I've struggled with this issue, hope you can lighten my mind.

 

I have several timelines in one page, for different animations.

 

This certain one should animate my items top and bottom, but when I hover on one, it should stop only "$this" element, and not the other animations.

 

Also can you please advise how can I separate timelines from each other,  maybe with name or anything else, to use them in different events.

 

Sorry for my simple questions, I'm not much experienced in Gsap and js Thanks in advance))

See the Pen EyBqPq by arpi123 (@arpi123) on CodePen

[Jonathan]

Hello Arpi and welcome to the GreenSock Forum!

 

Here are some example of animating multiple elements on hover with GSAP. It uses mouseeneter and mouseleave to prevent event bubbling.

 

See the Pen rOgVEd by jonathan (@jonathan) on CodePen

 

See the Pen KdYqWo by jonathan (@jonathan) on CodePen

 

You can see in those above examples this straight forward technique. The CSS properties im animating are different then yours but the concept is the same so all your elements get a timeline and hover event handlers attached to them

// set some global properties
TweenMax.set(".item", {transformOrigin:"50% 50%"});

// loop through each element
$(".item").each(function(i, el) {
  
  // set some individual properties
  TweenMax.set(el, {borderRadius:0});
  
  // create a timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  tl
  .to(el, 0.4, {x:25, borderRadius:15, ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  el.animation = tl;

  //create the event handler
  $(el).on("mouseenter",function(){
    this.animation.play();
  }).on("mouseleave",function(){
    this.animation.reverse();
  });
  
});

Hopefully that should lead you in the right direction on how to apply timelines to multiple element along with your hover in and out events.

 

[Arpi]

Thanks for your help Jonathan, This gave me motivation and idea to solve what I need.

 

Your quick responses really help me a lot and save my time. Thanks!

[Jonathan]

No worries glad to help!