Jump to content
Search Community

Set transition delay with GSAP like CSS does

SoldierCorp test
Moderator Tag

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

Link to comment
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.

Link to comment
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
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.
×
×
  • Create New...