Jump to content
Search Community

How to toggle a menu with different animations.

Ziafat Ali test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi @Ziafat Ali!

 

The problem is that one tween goes from autoAlpha 0 -> 1 ... while the next tween translates the x position from 0% to 100%. So the next time the tween for  autoAlpha 0 -> 1 fires, it's doing it ... but "off screen". Have a look at this CodePen ..

 

I use TweenLite.set() to reestablish the "home" position. Also .. I'm using simple Tweens vs a Timeline for easier control. Lastly, because you using % for the x property value, better to use 'xPercent'.

 

See the Pen bzWbPm by sgorneau (@sgorneau) on CodePen

 

 

Hope this helps!

  • Like 4
Link to comment
Share on other sites

Hi @Shaun Gorneau !

 

 

Thank you for the reply and your code works perfectly but actually, I have some advance animations in one of my projects and I tried to make a simple example in the codepen. I want to do it with timelines like I want to play TimeLine1 while opening the menu and TimeLine2 while closing it.

 

Please see the menu of this site https://designcanada.com/ how its menu animates and while closing, it animates to the other way.

 

Thank you very much for the support.

Link to comment
Share on other sites

1 hour ago, Ziafat Ali said:

I have some advance animations in one of my projects and I tried to make a simple example in the codepen. I want to do it with timelines like I want to play TimeLine1 while opening the menu and TimeLine2 while closing it.

 

No problem doing timelines :) have a look at this CodePen.

 

See the Pen wNdagP by sgorneau (@sgorneau) on CodePen

 

  • Like 5
Link to comment
Share on other sites

  • 7 months later...
  • 1 year later...
On 2/1/2019 at 12:18 PM, Shaun Gorneau said:

 

No problem doing timelines :) have a look at this CodePen.

 

 

This is really cool! On a side note, though, I noticed that the menu only rotates the first time it closes, which I don't think is intended. Does a rotational value need to be reevaluated or reset somewhere?

Link to comment
Share on other sites

On 6/26/2021 at 8:25 PM, Parris said:

Does a rotational value need to be reevaluated or reset somewhere?

 

Hey @Parris

 

Shaun's example codepen does have a line where it resets the xPercent of the navWrap.

 

tlIn.set( navWrap, {xPercent: 0} ) // <-- Resets it's position

 

That's where you could also set rotation: 0 again, and you should be good to go.

 

Since this is a bit of an older thread though it is still using GSAP 2, so you might want to consider updating things to GSAP 3.

 

Happy tweening :) 

 

  • Like 1
Link to comment
Share on other sites

@akapowl,

Thank you! That makes perfect sense. And yes, I definitely am working with GSAP 3 as I apply what I'm learning from you all. So thank you also for pointing me to the GSAP 3 Migration Guide. Zack said I would dig this place, and he's right. Thank you for sharing what you know!

 

P.S. - I thought maybe that just placing @ in front of a username in these forums might create the proper tagging. But I don't see that in my address to akapowl above. How do I do that?  ***Edit: Fixed tagging above after tip from akapowl. Thank you ***

Edited by Parris
Fixed my tagging after akapowl's tip.
  • Like 3
Link to comment
Share on other sites

4 hours ago, Parris said:

Zack said I would dig this place, and he's right. Thank you for sharing what you know!

 

My pleasure - and yes, this forum is awesome; a place like no other !

It's incredible how much there is to learn from, not just with regard to GSAP - so stick around :) 

 

 

4 hours ago, Parris said:

P.S. - I thought maybe that just placing @ in front of a username in these forums might create the proper tagging. But I don't see that in my address to akapowl above. How do I do that?

 

When you type in the @ and continue typing, there will be a little tooltip-like box popping up where you can click on the username to tag somebody (or navigate there with your keyboard's arrow keys). When selected, the tag will appear properly with the blue background rectangle.

 

Unbenannt.png.d884893d929c6f125b7e324f07e525de.png

 

 

 

  • Like 3
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.
×
×
  • Create New...