Set transition delay with GSAP like CSS does

[SoldierCorp 2 Likes (Newbie)]

Hi,

 

I created a simple pen just to show you the issue I am having in my real project and is related to the transition-delay because I need the animation starts only when the mouse stays in the element the desire time and not before, with CSS is easy because the transition-delay is the one for the job but I don't know how to do the same using JS/GSAP, do you have any idea?

 

In the following example you can see that if you pass your mouse over the orange div, the animation will be triggered only if you stay for more than 0.5s so you can like move your mouse over it and the animation will not be triggered but this is not happening with the blue one because if you put your mouse over the div and you moved out before the 0.5s, the animation still will be triggered.

See the Pen WKZQYW by SoldierCorp (@SoldierCorp) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Is this what you're looking for?

 

See the Pen 71b7f0aee4b81b29aaa958feab209506 by GreenSock (@GreenSock) on CodePen

 

overwrite:true will tell it to overwrite all other tweens of the same target, immediately. 

[SoldierCorp 2 Likes (Newbie)]

Yes, that's exactly what I was looking for.

 

Thank you!

 

EDIT:

 

Is not working as expected, the issue is happening when you have more than one tween, I just simple don't want to execute all the tweens until the hover delay is being completed.

[GreenSock 8,117 Likes (Superhero)]

2 hours ago, SoldierCorp said:

Is not working as expected, the issue is happening when you have more than one tween, I just simple don't want to execute all the tweens until the hover delay is being completed.

 

I'm not quite sure what you mean. You can have as many tweens as you want. Here's another technique with a few tweens: 

 

See the Pen 6a9016895563a525f30990a6053e3708?editors=0010 by GreenSock (@GreenSock) on CodePen

Does that help?