Jump to content
GreenSock

celli

move line from current position

Recommended Posts

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

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

@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

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

Yes, that's exactly it. Thank you Jack. Why is the overwrite:true important in this case?

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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. 

  • 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.
×