Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

Speed change of Timeline reverse

Recommended Posts

This seems to work fine for me.



  • Like 1
Link to post
Share on other sites

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

This is the effect I am after!

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

  • Like 2
Link to post
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 post
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. 



Make sense?

  • Like 3
Link to post
Share on other sites

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



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



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

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!

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