Jump to content
Search Community

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

ToxifiedM test
Moderator Tag

Recommended Posts

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!

 

ezgif.com-gif-maker (2).gif

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

Link to comment
Share on other sites

  • ToxifiedM changed the title to Unable to hide menu item when sub-menu is visible and unable to crossfade between two images

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.

 

Link to comment
Share on other sites

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
Cross-Logo.gif


2nd Request - On Click Hiding Main Menu And Display Sub Menu With Same Transition
Jumeirah.gif

Link to comment
Share on other sites

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. 

 

See the Pen e78e27dd0a7dea8cb3c4a876695ed151 by cassie-codes (@cassie-codes) on CodePen



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.

  • Like 2
Link to comment
Share on other sites

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. :)

 

Link to comment
Share on other sites

It would probably help to think in terms of 'states' to start off with.

Work out how you need to style each state, open, closed, submenu expanded etc. 

If the markup doesn't work, then adjust it.

Once you have the states sorted - figure out how to animate between them.

Also bear in mind there are lots of ways to 'hide' something - opacity/display/visibility/position. In this case it looks like making the nav elements position fixed when they need to be expanded and animating a transform would work.

I massively recommend getting out a pen and paper and working out the logic before jumping into code. It's what I always do - It's a massive help when you're stuck and it sounds like the hurdle here is comprehending the steps involved rather than a code specific one. Step back a little and write it out step by step.

 

  • Like 3
Link to comment
Share on other sites

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.

 



anime.gif

Link to comment
Share on other sites

Hi! Still active.

I was just sleeping 😴 
 

4 hours ago, ToxifiedM said:

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?

This is what you're instructing the timeline to do. When you click a submenu item you're adding tweens to one main timeline, then when you toggle you're playing or reversing this timeline.
 

4 hours ago, ToxifiedM said:

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

You can set tl.progress(0) if you want the timeline to instantly be set to the start without reversing

https://greensock.com/docs/v3/GSAP/Timeline/progress()

My gut feeling here is that you're trying to solve something with one GSAP timeline that would be best solved by thinking in states. You don't want one timeline playing through and reversing. 

You'll want to think in terms of a closed state, a menu open state and a submenu open state - you'll also need to think about how you manage multiple submenus. 

  • Like 2
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.
×
×
  • Create New...