Speed change of Timeline reverse

[jakob zabala]

When I hover off (mouseleave) I want to speed up the reverse of the animation timeline. the .timeScale(2) isn't working for me. 

See the Pen mdRwzLe?editors=0110 by jaykobz (@jaykobz) on CodePen.

[PointC]

This seems to work fine for me.

tlHoverC.timeScale(2).reverse();

 

[jakob zabala]

aaa yes, for some reason I thought the timeScale went at the end.

 

while on the topic, this solution, even speed up reversed doesn't give me the desired animation.

 

Here in my forked solution, I want instead of reverse the original timeline I want to use a .from tween to go from X opacity (if midway through the first timeline animation)  back to 0 opacity.

(as you know a .fromTo tween jumps to 100% if original timeline isn't finished)

 

Is there a solution to this?

 

 

See the Pen KKaqbWw?editors=0010 by jaykobz (@jaykobz) on CodePen.

[PointC]

Sorry but I don't follow.

 

You want to create new timeline for every mouseleave event? That's a whole separate timeline animating the same values as your main timeline. Seems like strange overwrites will start happening. Your original tlHoverC timeline also won't play a second time since you never reversed it. Why exactly doesn't reversing the timeline work for you?

 

This line will go from opacity 0 to whatever the current opacity value is so I'm not sure if that should be a .to() tween or what that's supposed to do.

.from("#lhov1C", { duration: 1.5, opacity: "0%" }, "strun2C")

 

Also, if the drawing timeline (tlLABLC) isn't relevant to this issue, you can probably remove it or comment out the code.

 

I'd like to help. I'm just not understanding why .reverse() doesn't give you the desired result.

[jakob zabala]

Thank you , You are super helpful and always get to the heart of the solution but I get how I made this slightly confusing.

 

Yes I understand the overwrite issue. I was getting this issue with other solutions, For some reason it is not working on codepen (I will add it but hopefully it doesn't confuse you), but my html works, I could film it if needed.

 

The reason I don't want to reverse is because I want to fade out immediately and quickly once the mouse leaves the box. The only issue is I don't know how to do this without waiting for the mouseenter timeline finishes. ... Is there a way to on mouseleave: kill/ pause the previous timeline and tween to an opacity 0.

 

if this still doesn't make sense I can explain it differently, just let me know! Thanks!

 

 

See the Pen YzNQBVm?editors=0010 by jaykobz (@jaykobz) on CodePen.

[jakob zabala]

[jakob zabala]

This is the effect I am after!

[PointC]

18 minutes ago, jakob zabala said:

I want to fade out immediately and quickly once the mouse leaves the box.

Crank up your timeScale on reverse to something like .timeScale(10)

[jakob zabala]

Thanks for the suggestion, but that doesn't let me have a buttery animation out, its too aggressive of a transition out!

 

its a lot to ask but surprised there is no option for a different animation out.

 

Why wouldn't a .from tween work in this situation? (i don't use from tween that much but surely it could be used for this, "animate back to opacity:0 from any opacity)

 

[PointC]

3 hours ago, jakob zabala said:

Why wouldn't a .from tween work in this situation?

 

A .from() tween animates from a value to the current existing value.

 

So you have a div with opacity:1 and you tween:

gsap.from(yourTarget, {opacity:0})

That will tween the opacity from 0 --> 1. It sounded to me like you were trying to tween the opacity back to 0 so tweening .from() 0 will not give you the desired result.

 

The other problem will be rapid hover in/out events: If a target is tweening its opacity to 1 and you interrupt that animation at 0.4, then your from 0 tween will only tween from 0 --> 0.4 because that's its current value. 

https://greensock.com/docs/v3/GSAP/gsap.from()

 

Make sense?

[jakob zabala]

Yes this makes sense a .from tween is wrong. and a .to animates form value A to value B. 

 

It sounds like the only way to not have odd hover over (interrupted animation) is .play() and .reverse()

 

 

[PointC]

You can do whatever you want. If you'd like a completely separate timeline for your mouseleave event, that's certainly up to you. You'll probably need to check if the other timeline is active and force it to the end with progress(1) or something like that. You can look at the isActive() method to check on that.

https://greensock.com/docs/v3/GSAP/Timeline/isActive()

 

But yeah, play/reverse on mouseenter/leave is usually the most foolproof way to do it. As you're finding out, when you have two timelines fighting for control of the same properties and the user could rapidly hover, you can end up with a lot of logic issues and weird overwrites to think about.

 

Happy tweening.

 

[jakob zabala]

Yes! The isActive looks like a possible good solution.

 

it is a small small difference but I am also asking incase something like this came up in the future!

 

Thanks so much for the help!