celli Posted February 14, 2022 Share Posted February 14, 2022 I have a very simple line moving from under one navigation item to the next on the x axis on hover, and I do want it to return to it's initial start position when not hovered over any navigation items, like it is capable of doing now—but, the thing I am trying to figure out is how to get it to seamlessly move from under one nav item to the next when I move my mouse and hover over each of the buttons? Currently it returns (quickly) to it's start position before sliding to the appropriate nav item; and likely doing what it's supposed to do because the TL is reversing when I hover off each item—but I am trying to figure out a way to still get it to return there when I'm not hovered over any nav items, but also smoothly slide to each nav item position while hovering from nav item to nav item? See the Pen QWOggmL by celli (@celli) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted February 14, 2022 Share Posted February 14, 2022 If you don't want it to return to it's initial position, you really shouldn't be using reverse. You would probably need to keep track of item is currently selected, and create a new animation using that and the next item that is going to be selected. @PointC don't have a demo/tutorial on something similar to this? I'm having trouble finding it at the moment. Link to comment Share on other sites More sharing options...
celli Posted February 14, 2022 Author Share Posted February 14, 2022 @OSUblake, yes I wouldn't want to reverse it when switching from nav item to nav item, but I would actually want to return it to it's starting position when I am not hovered over any nav items Link to comment Share on other sites More sharing options...
OSUblake Posted February 14, 2022 Share Posted February 14, 2022 You still wouldn't want reverse for something like this. Just like I mentioned above, you create your animations on the fly, and if you're not hovering over an item, then you would animate it back to the initial position. Link to comment Share on other sites More sharing options...
GreenSock Posted February 14, 2022 Share Posted February 14, 2022 This is what Blake is talking about I think: See the Pen QWOqpyL?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
celli Posted February 15, 2022 Author Share Posted February 15, 2022 Yes, that's exactly it. Thank you Jack. Why is the overwrite:true important in this case? Link to comment Share on other sites More sharing options...
OSUblake Posted February 15, 2022 Share Posted February 15, 2022 It might not be super important if all your durations are the same, but it's a good idea to kill off any running animations. 3 Link to comment Share on other sites More sharing options...
GreenSock Posted February 15, 2022 Share Posted February 15, 2022 Right. That's just for if the user clicks around very quickly - maybe it's in the middle of tweening elsewhere when you create a new tween going to new coordinates/width - it's best to kill the old tween(s) so they're not fighting. You'd never notice unless the durations are different because the newer tween runs after the former one, but if the older one goes LONGER and is animating to a different place, you'd see it jump when the newer tween finishes. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now