Screen dim on nav bar drop down

Design help General
2

MAKE THE LAYER:

  1. Create a new DIV, let’s call it grey out.
  2. Make that DIV 100VW x 100VH
  3. Make the position FIXED and FULL
  4. Give it a Z-Index of 9999 (Just to be safe)
  5. Under background, let’s give it a solid background of Black @ 80% (This is just an example choice.)
  6. Go to the Navigator Panel and double click on your nav bar layer.
  7. Set the z-space of the nav panel to 10000.

INTERACTIONS:

  1. Now double click on your menu icon.
  2. Go to your interactions panel and create a new ‘Mouse Click (Tap)’ interaction.
  3. ‘On 1st Click’, create a new animation.
  4. Create a new Opacity animation and right click that layer and change the target layer to the full-screen DIV we made in the beginning.
  5. Make a copy of that animation action.
  6. Set the opacity of the first animation action to 0%.
  7. Set the opacity of the second animation action to 100%.
  8. Select the first animation action and go down to the ‘Timing’ section and check ‘Set as initial state’. (This will load the DIV as transparent when the site loads.)
  9. Close that animation panel and go to ‘On 2nd Click’.
  10. Duplicate the animation we just made and swap the two opacity animation actions so that we now go from 100% to 0% when we click out. Uncheck ‘Set as initial state’ for the first animation action. Close out of this animation all-together.
  11. Now go to the full-screen DIV we created earlier. Apply a timed animation to this layer (just like we did for the nav menu icon) but apply the second animation we made as the 1st click animation for this layer. This layer doesn’t need a second click animation, so leave it blank.

I didn’t include animation ease settings because that you can do on your own, I’m sure. I hope this helps! Let me know if this causes interactivity issues. You may need to add a move action to your animations to keep it off screen until you need it. If that is the case, do what we did for opacity animations, but use the move action instead. Just move it a split second before and after the opacity change. Perhaps put it off to the left of the screen 100VW. Remember to do this before and after on both layers you added animations to.

2 Likes