Trying to reverse animate

[RoaldKamman]

Hey, 

 

I'm just trying to make the arrow do the same 180degree rotation on a second click when closing and opening the navigation. So every time it gets clicked it rotates 180 degrees from where it's at. 

 

I'm not sure what the best method is for this. I tried yoyo() reverse() runBackwards() but I also can't get any of them to work.

 

Thanks

See the Pen vYLyZWB by RoaldKamman (@RoaldKamman) on CodePen

[ZachSaucier]

Hey Roald. A few notes:

• You're using the old GSAP formatting. We highly recommend the sleeker GSAP 3 formatting. Please see the migration guide for more info:
• There's no point in using a stagger if you only have one target element.
• If you want to reverse an animation, you should create the animation outside of the event listener and control the animation inside of the event listener. I write about how to do that in my article on animating efficiently which I highly recommend that you read.

Here's how I'd set it up:

See the Pen WNroOPE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

FYI jQuery's animations are not the most performant. I might consider switching them over to GSAP ones that you make instead.

[_Greg _]

Hi.

Use GSAP 3 

UPD: Check Zach answer! You don't need to use timeline for control animation, you can control tween

For use reverse() you need create timeline like const tl = gsap.timeline()  https://greensock.com/docs/v3/GSAP/Timeline
Then you can use play(), pause(), seek()...

 

UPD Zach was faster

Edited June 17, 2020 by Nekiy2
Wrong answer

[ZachSaucier]

3 minutes ago, Nekiy2 said:

For use reverse() you need create timeline like const tl = gsap.timeline()  https://greensock.com/docs/v3/GSAP/Timeline
Then you can use play(), pause(), seek()...

Actually all of those methods are available on tweens as well. You don't need to use a timeline  

[_Greg _]

1 minute ago, ZachSaucier said:

Actually all of those methods are available on tweens as well. You don't need to use a timeline  

😲 i don't know about that before, but i see your example without timeline 👍 

[RoaldKamman]

 

sooo something lime this? except it throws and error for the closing bracket of the tl? 

[ZachSaucier]

4 minutes ago, RoaldKamman said:

sooo something lime this? except it throws and error for the closing bracket of the tl?

No, not like that. Nekiy2 was incorrect with what he said (you don't need a timeline) and your formatting is incorrect in several places. See the demo included in my post above for how to set things up.

[RoaldKamman]

this is getting more confusing with every second I reversed everything i did and only changed tweenLite to gsap.to. ALL I really want is to make sure it makes a 180 degree turn with every click.  

 

I have no clue what I'm supposed to look for within the 2 long blogsposts. It's pretty overwhelming as a beginner. Please be a little more specific.  

 

Nevermind I need a break. I just totally missed your example. let me extract the lessons from that. My  bad

[ZachSaucier]

Just look at the demo that I included if you don't want to read the resources that I shared (though I encourage you to read them anyway):

See the Pen WNroOPE?editors=0100 by GreenSock (@GreenSock) on CodePen

[RoaldKamman]

Yeah, thanks @ZachSaucier I totally missed that from the start.