Jump to content
SoldierCorp

Set transition delay with GSAP like CSS does

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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: 

 

Does that help? 

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.