Jump to content
GreenSock

Arpi

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

 

:)

  • Like 3
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

No worries glad to help! :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×