Rotating arrow behaviour

[NickWoodward]

Am trying to get arrow icons to animate up and down when toggled, like you'd see when reordering rows in a table

I don't *think* it's my logic that's messed up here, rather I think it's my understanding of the animation, ie the starting position/rotation of the arrow itself. Having said that, it *has* strangely worked a couple of times, so maybe it is my logic! 🤷‍♂️

The arrow always seems to end up with a rotation of 90, even when `animation180.reverse(0)` is called (which should end on -90, right?). Is it auto playing at the end (so backwards and then forwards again? **edit: apparently not). I had thought about doing this all in one timeline, but while I could work out how to get the animation to start at any location and go in any direction, I couldn't work out how to get it to stop. That would probably the more elegant solution, but I feel like this should still work?

Anyway, I've not exactly had a good run of spotting simple errors recently, but I'm willing to look like an idiot again if someone's willing to take a look! 😄

See the Pen bGvJOvv?editors=1011 by nwoodward (@nwoodward) on CodePen

[GreenSock]

It looks like you've got a lot going on in there and you're pre-baking a bunch of different timelines for various states. I think usually that's a mistake - it's far better to just dynamically create your animations when you need them so that everything is fully dynamic, using the current state as the starting point. Otherwise, what happens if one animation is halfway done and the user clicks and you've gotta go to a different state - you want it to pick up from where it currently is rather than re-running a canned animation that has a fixed start and end value (and the start doesn't match the halfway-animated one). 

 

Sorry, I'm not clear on what you're asking here. I don't know what "reordering rows in a table" looks like in terms of an arrow. 🤷‍♂️

 

If you've got a GSAP-specific question, we'd be glad to answer that. General logic troubleshooting and wiring up a whole system is probably beyond the scope of help we can generally provide here.  

[NickWoodward]

4 hours ago, GreenSock said:

It looks like you've got a lot going on in there and you're pre-baking a bunch of different timelines for various states. I think usually that's a mistake - it's far better to just dynamically create your animations when you need them so that everything is fully dynamic, using the current state as the starting point. Otherwise, what happens if one animation is halfway done and the user clicks and you've gotta go to a different state - you want it to pick up from where it currently is rather than re-running a canned animation that has a fixed start and end value (and the start doesn't match the halfway-animated one). 

 

Sorry, I'm not clear on what you're asking here. I don't know what "reordering rows in a table" looks like in terms of an arrow. 🤷‍♂️

 

If you've got a GSAP-specific question, we'd be glad to answer that. General logic troubleshooting and wiring up a whole system is probably beyond the scope of help we can generally provide here.  

 

Hi Jack.

Yeah sorry, I guess I overcomplicated my example because I'd been working on it. Was difficult to see what I was trying to do and "reordering rows" didn't help! 

I've now included a simplified demo below, but these are the sort of arrows I was talking about. Basically, if the arrow points right (because it hasn't been clicked before) and it's clicked, it should point down. If it's down, it should rotate up. If it's up, it should rotate down:



Creating the simplified demo actually highlighted (one of) the problems I was having - I assumed the rotation was relative to the arrow's current orientation, not its initial position. So this demo now works as I'd like. The problem I still have is that a 'count' doesn't really work for my actual project, so I'm a bit stumped. I guess I could put a count property on the arrow element, but it would be nice if it could be done based on where the arrow is. I guess I'll have to have a think about it!

See the Pen zYWQJyV?editors=1111 by nwoodward (@nwoodward) on CodePen

 

And yeah, I did think that maybe it was the animations interrupting each other, turns out it wasn't, but you're right, I do need to try and keep things in one timeline that I navigate through. I'm bad at that... here's my (broken) effort - No idea why it's rotating to 270 straight away...

See the Pen WNzBaGY?editors=1011 by nwoodward (@nwoodward) on CodePen

 

[Carl]

Hey @NickWoodward

 

I think @GreenSock was actually saying that keeping everything in one timeline also isn't good.

In situations like this where there are multiple different states that you have to navigate through it is better to dynamically create tweens instead on demand.

 

based on your loop I assumed there would one day be multiple arrows and only 1 would ever be active at a time (facing up or down).

 

You have 3 states: right, up, and down.

 

Clicking when direction is right OR up spins the arrow down.

 

Clicking when the arrow is down can only spin it up.

 

Clicking an arrow can only spin it up or down so there is a conditional check that will create the proper tween.

 

Once you interact with an arrow I loop through all the arrows and reset all the ones you aren't clicking on.

 

There are probably half a dozen ways to handle this, but this was the easiest for me to get working quickly with the least amount of code.

 

See the Pen bGvyXQY?editors=0010 by snorkltv (@snorkltv) on CodePen

 

I have a 3 Part series: Breaking Free of the Timeline Mindset in my B-sides, Bonuses, and Oddities course. It highlights why timelines aren't great when you need a high level of interactivity AND how creating functions to handle state changes is much more flexible. 

 

hope this helps.

 

Carl

 

 

 

[NickWoodward]

Amazing, thanks Carl. I've been through that Breaking Free of the Timeline course before and remember it being good, but I had even less idea what I was doing back then. Hopefully it'll stick better now.

Thanks a lot for taking the time to help, both of you 🙂👍