ToxifiedM

@CassieIs the above topic still active or should I post it as a new question?

Hey, I tried an approach to hide the main-menu when sub-menu is requested. After navigating within the sub-menu, as I close the navigation menu, and when toggle it back, the transition works as expected but even without navigating to the sub-menu link, the sub-menu is visible after the main-menu transition ends. Why such behavior, can you please help me out here? And is there any way to end the transition in a different way without revering, as the transition reverses back from deep within the sub-menu, it makes the transition whole lot of a longer duration, and takes more time to complete. Why is the state isn't being reset when I close the navigation menu, its kind of weird, as when I re-open the navigation menu for the second time after navigating from the sub-menu, it automatically animates to the last state i.e. to the point where the sub-menu is visible. https://codepen.io/ToxifiedM/pen/NWpKKzb

Okay, ill do by your method. Thanks for the advice.

Ahh see, I will surely check that out, thanks for the idea. So this is for the crossfading part. Now for the menu and sub menu part, how can I approach something like that. As the sub items are child elements of menu items so as I hide the menu the sub items hide too, if you can give me a little bit of idea for that too. If its possible for you.

Hey, it isn't working, firstly I need the transition Hey, thanks for the revert, Firstly, I'm unable to make the image crossfading transition work and sync with the `navigation-overlay`. As you can see, when the background turn from white to black, at that point, I need to crossfade the image from A to B with the same transition, speed and duration as of the `navigation-overlay`. As you can see the codepen, there are two circles overlapping one another, need to transit from one to another with the same duration and speed and and at the same time, with the same style, while opening the menu and while closing too. Secondly, in regards to hiding the main menu, I meant, when I click a menu item which has sub-menu items, the sub-menu items are displayed by slide down animation, Instead of that, let say when I click `Our Products`, I need to hide all the main menu items and show the sub menu items of `Our Products` with the same transition style. In both the scenarios, none of them working in the above codepen. I hope you understand what I'm trying to say. Note: GSAP updated from 3.5.1 to 3.6.1. 1st Request - Logo Image Crossfading Synchronized With The Overlay 2nd Request - On Click Hiding Main Menu And Display Sub Menu With Same Transition

Hello, Whenever a user toggles the menu, menu items are shown. As per my current implementation, whenever a menu item is clicked, the sub-menu drops down. Now instead of that, I need to hide the main menu items and show the sub-menu with the same transition. And one more thing, I need to cross-fade between two images and want to sync the transition style and duration with the `navigation-overlay`. Please check the gif below to understand, what I want to achieve. Please someone can spare some time to help me out here. I would really appreciate it. Thank you for your time!

Thanks alot, You are a great help, I was trying to figure this out since 2 day now. ?

Whenever I try to use the scroll trigger using scroll proxy for the "smooth-scrollbar", it only works when I initiate the scroll to the body, when I am doing it for the tag, <main class="root">, the smooth scrollbar works but the scroll trigger doesn't. To make the scroll trigger work, I have to first initialize the smooth scrollbar to the body along with the scroll proxy. As in here, I need to attach the scroll bar to the class ".root" and need to make scroll trigger work for the same, instead of attaching the whole thing to the "body". I am not just getting what's up. Please revert back.