Jump to content
GreenSock

daniel_pan

TimeLineMax hover handle

Go to solution Solved by Diaco,

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

Hi, I am pretty new to GSAP.

 

I may make a pretty stupid question.

 

What I want to do is when I hover in an element, it triggers a Timeline animation.

And When i hover out, it triggers another one.

 

Problem is when the hover-in animation not finished and i hover out, the hover-out animation would have to wait the hover-in animation to finish. And if i hove in and out so many times, it will trigger so many in and out animations. What i want is when hover out, it would stop the hover-in animation and start the hover-out animation.

 

Here is the demo code: 

 

Again, i may make a stupid question and hope someone could help.

 

 

See the Pen XXREZb by DanielYKPan (@DanielYKPan) on CodePen

Link to comment
Share on other sites

Hi daniel_pan :),

 

Welcome to the forums. 

 

You can just set up one timeline and then play() on hover and reverse() on hover out.

 

Here's a fork of your pen: 

See the Pen mVmxgK?editors=101 by PointC (@PointC) on CodePen

 

Hopefully this helps. :)

Link to comment
Share on other sites

Hi daniel_pan  :),

 

Welcome to the forums. 

 

You can just set up one timeline and then play() on hover and reverse() on hover out.

 

Here's a fork of your pen: 

See the Pen mVmxgK?editors=101 by PointC (@PointC) on CodePen

 

Hopefully this helps. :)

 

Thanks for your reply!

 

I tried this before, and it did what i want for the hove in and out scenario.

But i don't like the reverse animation because the staggerTo from reverse would start from the last item. I want it to start from the first item when hover out.

 

Any idea i could achieve this?

Link to comment
Share on other sites

  • Solution

Hi daniel_pan :)

 

pls try these ways :

 

See the Pen jWmKQz by MAW (@MAW) on CodePen

  tl.staggerTo(items, 0.15, {y:-10,opacity:1}, 0.1)
    .addPause(null,function(){ if(toggle)tl.play(); } )
    .staggerTo(items, 0.15, {y:0,opacity:0.2}, 0.1)

function over(){  tl.restart(); toggle=0; }
function out(){  tl.play(); toggle=1; }

or 

 

See the Pen PZmaxp by MAW (@MAW) on CodePen

function over(){  TweenMax.staggerTo(items, 0.2, {y:-10,opacity:1}, 0.1) };
function out(){  TweenMax.staggerTo(items, 0.2, {y:0,opacity:0.2}, 0.1) };

with second way , if you need to use timelines ; you should to define 2 timelines , or clean your timeline before adding new tweens :

See the Pen GomGwN by MAW (@MAW) on CodePen

  • Like 4
Link to comment
Share on other sites

Hi, Diaco

 

Thanks for your reply!

For my real project,  I need to use Timelines for better time control. Good to know that clear() function in Timelines!!!!

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.
×