Responsive navigation

[indy_dln]

Hi all! 
 

Firstly, hello to everyone. I’m completely new to posting on here; however I’ve spent a lot of time looking around for a while now. 
 

Secondly.. I need some help 😬. 
 

i created a timeline for the opening and closing of a mobile menu in gsap3 linked to a hamburger button and it works fine (albeit with some refinement necessary!). But it only plays forward and I can’t figure out how to toggle it so that it plays in reverse to close it?! 
 

I set up the button as a const and added an event listener with tl.play().
 

Any ideas? I can only seem to find information for using a separate trigger to reverse and not toggling the same button. 

[ZachSaucier]

Hey indy_dln and welcome to the GreenSock forums. It's pretty hard for us to help out without seeing your code for ourselves. Can you please create a minimal demo using something like CodePen for us to look at?

 

Based on your description alone I would guess that you need to detect the reversed state. Something like this:

tl.reversed() ? tl.play() : tl.reverse()

 

[indy_dln]

1 hour ago, ZachSaucier said:

Hey indy_dln and welcome to the GreenSock forums. It's pretty hard for us to help out without seeing your code for ourselves. Can you please create a minimal demo using something like CodePen for us to look at?

 

Based on your description alone I would guess that you need to detect the reversed state. Something like this:

tl.reversed() ? tl.play() : tl.reverse()

 

 

Thank you so much for getting back to me so quickly! Great to have such knowledgable people out there and appreciate you giving up your time to help! 😀

 

Apologies about the lack of example, I've attached (very vibrant!) codepen!

 

It kinda worked. Although when I load the page for first time, it reverses the timeline, then works how it should after a second click. 

 

Again, thank you for your help so far. 

 

See the Pen poEppNX by Indy_d (@Indy_d) on CodePen

 

 

 

 

 

[ZachSaucier]

That's easily fixed by setting the reversed state when you create the timeline  

var tl = gsap.timeline({ reversed: true });

Happy tweening!

[indy_dln]

10 hours ago, ZachSaucier said:

That's easily fixed by setting the reversed state when you create the timeline  

var tl = gsap.timeline({ reversed: true });

Happy tweening!

 

Hi Zach. Thanks so much for that, such a simple fix haha. I've forked the pen and put it below for others who might need the same solution 

 

Just need to figure out how to nest different actions now? I've got two sub-menus that would need to animate on click too. Is the code in the pen below way off?!

 

See the Pen KKgZxWL by Indy_d (@Indy_d) on CodePen

 

[ZachSaucier]

3 hours ago, indy_dln said:

Is the code in the pen below way off?!

Your goal isn't clear to me. You can't animate display... 

 

Perhaps I'm being dull, but why not make that animation a part of your other timeline if they're both happening when you click your nav?

[indy_dln]

On 12/29/2020 at 1:50 PM, ZachSaucier said:

Your goal isn't clear to me. You can't animate display... 

 

Perhaps I'm being dull, but why not make that animation a part of your other timeline if they're both happening when you click your nav?

 

The idea was to trigger a sub-menu when a dropdown is clicked. I'm going to work on it a bit and see how I get on as I think the SCSS and they properties I'm calling in the animations are a bit muddled, which isn't helping matters. 

 

Although, the local development version of the site looks and works awesome! It's my first time using GSAP on a site; got some scroll triggers going on too.   

 

 

[indy_dln]

Hi Zach 

 

Just an update on this. I figured it out in the end (I think!) and used it on this site:

https://www.lime-financial.co.uk/

 

It needs a bit of refining but thank you for your help 😊

 

Indy