Increase the rotation clockwise by 180 degree on each click

[Charlene]

Hello all of you,
I'm trying to create an icon animation where the two lines that make it up must always rotate in a clockwise direction, regardless of the animation state (forward or backward).
Despite the need to create the simplest possible demonstration, I've still used the VueJS3 Framework, because I wonder if the unexpected result I'm getting isn't somewhat related to the way the functions are launched.
I'm really having trouble understanding why I'm getting the result I'm getting. If anyone can shed some light on this, I'd be very grateful!

- Why the animation seems incomplete at the first click
- Why on second click there is just one element moving up
- Why on all next click the animation seems to be played at reverse

Expected result: 
On first click, the "chevron" icon rotate clockwise to look up 🔺 On second click, the "chevron" icon still rotate clockwise to retreive is initial look down 🔻 and so one.
So the icon has two state (up and down) but toggle it by rotating always clockwise.

See the Pen vYbgQRB by charlene-bx (@charlene-bx) on CodePen

[Rodrigo]

Hi,

 

I think your setup is far too convoluted, this seems simpler:

See the Pen RwvKzYN by GreenSock (@GreenSock) on CodePen

 

Also when trying to achieve something like this is always better to not use a single timeline because here you are adding new instances to the timeline over and over again, making it longer and longer without any real need for that:

function addAnimationsToTimeline (tl) {
  tl.addLabel("forward")
  tl.to('.chevron', {y:'-10%'})
  tl.to('.chevron .hand-1', {rotation:"+=180", duration: .6}, '<')
  tl.to('.chevron .hand-2', {rotation:"+=180", duration: .4}, .2)
  tl.addLabel("backward")
  tl.to('.chevron', {y:'10%'})
  tl.to('.chevron .hand-1', {rotation:"+=180", duration: .4}, '<')
  tl.to('.chevron .hand-2', {rotation:"+=180", duration: .6}, .2)
}

Hopefully this helps.

Happy Tweening!

[GreenSock]

If it were me, I'd simplify it quite a bit to this: 

See the Pen QWYpbMe by GreenSock (@GreenSock) on CodePen

 

And that allows you to click as much as you want, as quickly as you want. 

 

Does that help? 

[Charlene]

Indeed, It's exactly the effect that I want! I'm really gratefull!
So my issue was that instead having one timeline for each click I've one global timeline with multiple tweens in it?

[GreenSock]

9 hours ago, Charlene said:

So my issue was that instead having one timeline for each click I've one global timeline with multiple tweens in it?

No. My solution is creating a new timeline for each click. That's fine, but even that isn't necessary - you could do it with individual tweens too; I only used a timeline for sequencing (which you could use delays for instead) and because you were using a timeline so I figured it might make more sense to you. 

 

Here's a fork that doesn't use any timelines: 

See the Pen LYqyWop by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? Timelines can be super useful especially if you want to control an entire sequence as a whole but if you're just firing off tweens and not doing much choreographing with relative times, it's fine to use individual tweens. Whatever you find most intuitive.