Some strange delay in timeline on reverse on mouseleave

[AsKadir]

Hi!

I have an issue for mouseleave event,

I'm using simple timeline with play() and reverse().

When cursor leave div timeline starts working properly,

but there is set that has delay and sometimes it's not working.

If I remove it from timeline and add gsap.set inside mouseenter and mouseleave everything is fine.

 

What am I doing wrong?

See the Pen eYpEavz by ChicagoJostik (@ChicagoJostik) on CodePen

[ZachSaucier]

I think this is related to a bug that has been fixed in the most recent version of GSAP where .set() at the beginning of timelines caused some problems. You can use the beta version here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js

 

But I would probably approach the situation differently anyways, applying an animation to the circle that follows the mouse cursor: 

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

 

Alternatively, you could actually make the circle that follows the cursor become the size and color of your teal circle kind of like these threads:

 

[AsKadir]

@ZachSaucier Thanks, Zach!

I saw those animations, but it's not related to my design, will be waiting for new official update.

 

[AsKadir]

@ZachSaucier Sorry for disturbing you, Zach!

You said it's some bug for set(),

but I have the same issue if I add animation you made inside timeline with to().

 

You can see it here 

 

Can you explain what's wrong?

 

 

[ZachSaucier]

1 minute ago, AslanGoi said:

I have the same issue if I add animation you made inside timeline with to().

 

You can see it here 

I'm not seeing anything wrong. What are you referencing?

[AsKadir]

5 minutes ago, ZachSaucier said:

I'm not seeing anything wrong. What are you referencing?

Can you look at your codepen and then to mine,

if look closely, you can see the difference, maybe 0.1-0.2s delay in my codepen.

 

I call a wife, she also see this)

[ZachSaucier]

1 minute ago, AslanGoi said:

if look closely, you can see the difference, maybe 0.1-0.2s delay in my codepen.

Are you talking about for the circle disappearing and reappearing? If so, that's likely due to your perception and the ease that you're using. By default tweens have an ease of "power1.out". You might want to use "none" or "power1.in" and see what you prefer. Check out the ease visualizer to see how the curves themselves appear.

 

I'm pretty confident there's no bug going on. 

[AsKadir]

11 minutes ago, ZachSaucier said:

Are you talking about for the circle disappearing and reappearing? If so, that's likely due to your perception and the ease that you're using. By default tweens have an ease of "power1.out". You might want to use "none" or "power1.in" and see what you prefer. Check out the ease visualizer to see how the curves themselves appear.

 

I'm pretty confident there's no bug going on. 

But we have same ease by default, right?

Can you mouseenter my div, wait for filling its background, then mouseleave fast maybe for 100px and stop,

you will see that cursor is leaving without circle and only then circle is appearing.

 

And check the same movements for your codepen, also wait for background filling,

then mouseleave fast for 100px. In your example circle will appear before stopping cursor on 100px.

 

Can you please, check it again?

[ZachSaucier]

3 minutes ago, AslanGoi said:

Can you mouseenter my div, wait for filling its background, then mouseleave fast maybe for 100px and stop,

you will see that cursor is leaving without circle and only then circle is appearing.

That's because you put the tween at the beginning of the timeline using 0 as the position parameter. The whole rest of the timeline has to be scrubbed through before the tween is reached. That's why I used a separate tween in my demo above (so there's no delay).

[AsKadir]

11 minutes ago, ZachSaucier said:

That's because you put the tween at the beginning of the timeline using 0 as the position parameter. The whole rest of the timeline has to be scrubbed through before the tween is reached. That's why I used a separate tween in my demo above (so there's no delay).

I thought absolute time 0 means to start animation from the start of a timeline.

Do you mean that on reverse() absolute time start animation from the end?

I can't get the point, sorry.

[ZachSaucier]

Here's a basic visualization of the tweens in your timeline: 

 

The pink tween represents your cursor tween. The red line represents the playhead of the timeline. When the timeline plays forward, all the tweens start at the same point in time (because you set the start time of each to 0). 

 

When the timeline reverses, the timeline goes from the end towards the beginning. So at the very start of the reverse it would be visualized this way:

 

In other words, there's a gap before the cursor tween is reversed because the duration of the other tweens in timeline are longer.

 

This is why it's better to use a separate tween (like I did) instead of adding the cursor tween to the timeline.

[AsKadir]

@ZachSaucier

Thanks, Zach!!!

Now everything is clear.