[Unable to hide menu item when sub-menu is visible and unable to crossfade between two images]

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

[Unable to hide menu item when sub-menu is visible and unable to crossfade between two images]

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.

 

[Unable to hide menu item when sub-menu is visible and unable to crossfade between two images]

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

[Unable to hide menu item when sub-menu is visible and unable to crossfade between two images]

1 hour ago, Cassie said:

I'm afraid we don't have the capacity to code this up for you, but I can give you some pointers.
 

If you want tweens to sync with each other, one way to do this is to use position parameters to make sure that they start at the same time, making sure they have the same duration and ease. 

 

 

 

If I were you I'd break this down into small chunks, get the image fade working correctly then sync it up with the navigation fade.

 

 

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. 

 

[Unable to hide menu item when sub-menu is visible and unable to crossfade between two images]

Hey, it isn't working, firstly I need the transition 

1 hour ago, Cassie said:

Hi there. 😊

First things first: You're using an older version of GSAP. We definitely recommend that you learn and use GSAP 3. It has a smaller file size, a sleeker API, and a bunch of new features that you're going to love!

I've checked your codepen and it looks like you've got it working though? Let me know if I've misunderstood and I can see if I can help.

 

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

[Unable to hide menu item when sub-menu is visible and unable to crossfade between two images]

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!

 

See the Pen NWpKKzb by ToxifiedM (@ToxifiedM) on CodePen

[Unable To Apply Scroll Trigger Along With Smooth Scrollbar]

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

[Unable To Apply Scroll Trigger Along With Smooth Scrollbar]

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.

See the Pen zYqbJyZ by ToxifiedM (@ToxifiedM) on CodePen