Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ziafat Ali

How to toggle a menu with different animations.

Recommended Posts

I'm trying to toggle a menu with different animations while opening and closing. The animation plays for only once and after closing the menu, it doesn't work again. Can you please help?

See the Pen davavM by ziafatali (@ziafatali) on CodePen

Link to comment
Share on other sites

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

I have a codepen with a hamburger menu animation similar to your question, in case it helps you. You can check out the code:

 

You can toggle CSS classes on click and run different timelines.

 

See the Pen JxXbbB by omarel (@omarel) on CodePen

 

  • Like 2
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 4
Link to comment
Share on other sites

Hi @omarel !

 

Thanks for the reply, yes your solution is also close to my requirement.

 

Thanks again.

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