indy_dln

That's worked a treat. Thank you to yourself and Cassie for taking the time to assist with this, I'm extremely grateful to you both!

YOU. ARE. AMAZING! Thank you for your help with that, you and Rodrigo have been great. Everything seems to be working as I'd hoped except for one thing and I've updated my pen below so you can replicate this. If the mobile menu is opened, then the page is re-sized to desktop (so that the menu resets), then resized to mobile again, the mobile menu doesn't open again? But if I re-size it one more time it then works?! Not sure what's going on there! https://codepen.io/Indy_dln/pen/WNgRRpm

Bonjour my friends on the internet! I've had another go at this using Rodrigo's advice and it's nearly there Took me a while to realise I had to update my dependencies (duh!) as matchmedia wasn't triggering when I resized. I'm having some trouble with the CSS though the moving between desktop and mobile menu and whether I should be using .fromTo or .to, gsap.set etc. I'm going to work on the timings so everything triggers better but previously I'd made a media where the animation reversed faster, but I'm not sure how to add that in here? Any tips/advice on this would be greatly received! https://codepen.io/Indy_dln/pen/WNgRRpm

Thank you so much for this, it is very much appreciated!! It'll definitely set me on the right track as I think I was confusing a lot of things between CSS and the JS. I'll see how I get on then come back with updates.

What was happening is that it would fire properly but then the animation would not fully reverse. I think this is as because of what you've said regarding the CSS and the use of 'to' with GSAP.set rather than 'fromTo' and having it in the CSS.

Hi all, I've made this responsive navigation and I'm just STRUGGLING! I'm not fantastic at JS stuff but it just seems to work then... not! Have any of you got any ideas on how I could improve this? Also, how I could make the drop down on hover for desktop and o'clock for mobile?

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

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.

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?! https://codepen.io/Indy_d/pen/KKgZxWL

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. https://codepen.io/Indy_d/pen/poEppNX

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.