Jump to content
Search Community

Speed change of Timeline reverse

jakob zabala test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

 

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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.

 

  • Like 1
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...