Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
axe-z

Multiple timelines, on the same element, with different event listeners.

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

I'm a newbie, I did read the docs, but could not find an answer that fitted, or at least did not understand correctly apparently. I do not undestand why I can not control the first TL, while animating the second one. I 've tried almost every thing, been on this for two days, 7 hairs left, please help me obi wan, you are my only hope. Also, am I in the right direction at all ? 

See the Pen gwZVXA by axe-z (@axe-z) on CodePen

Link to comment
Share on other sites

Hi axe-z,

 

Thanks for the Pen, it helps a lot. I am still not quite sure what you want when you say you want to stop the animation on hover.

 

Have a look at the bellow, it is a fork of your pen. This is my guess to what you are after. Is this right?

 

See the Pen WGJrmL?editors=0010 by dipscom (@dipscom) on CodePen

 

Oh, and I'm not Obi-Wan. He said he'd be back soon. Something to do with something called 'Sith' infestation at his place.

  • Like 3
Link to comment
Share on other sites

Thanks , but that s not it , there is an other event ( DBLCLICK) that reverse the click event. Still I do not know how to stop it ( the hover animation ) there. And restart it, only back at the position at the very start. I did make it to your point, but could not find a way , to restar the hover at the right moment,  ive tried if ( tl.reversed()) { flag= true }, did not work, I do not know why. It would be ease if we could say tl.stop() , when tl2.play(), but that does not work either, and the docs did not give an answer on that. The answer might be super simple, but being a beginner.... Or maybe a onReverseComplete put the flag back to true, but it does not seem there is such a method. Men I need help, impossible that this is not possible. HELP ANYONE , I am going mad over this, every time I think I got it it does not work!! 

Nice start ! 

Link to comment
Share on other sites

It's late for me now, but I'll get back onto it tomorrow.

 

We'll work it out :)

Link to comment
Share on other sites

I have found it !!! hahaha, I gave my self the answer, onReverseComplete exists ! great !! Still I have tried so many thing I thought should work and did not. I have ajusted the codepen. 

  • Like 1
Link to comment
Share on other sites

Cool! Well done Axe. I'm happy that you've found the solution.

  • Like 2
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.
×