Fly Out Menu – Mobile/Tablet

Design help Animations & Interactions
9

Hi there,

Here is the setup that you need
Hamburger Open:
12%20PM
You don’t need opacity or scale all you need is hide/show and move - just make sure the show takes 0sec and it happens before move.

  1. for initial state you set (1) “menu flyout” move X=100% and (2) Hide/Show to “hide”
  2. for the middle of the animation set (1) “menu flyout” Hide/Show to “block”
  3. for the end of animation set (1) “menu flyout” move X=0%
    *note make sure that the selector stays in % sign and try playing with easing - for example set to in/out quint - will make the animation look good

Hamburger Close:
32%20PM

  1. you don’t need an initial state.
  2. set “menu flyout” move X=100%

if the animation still is not working try to go over it and right click on each element and chose “choose different target” and re-select the correct element that should be affected… when I tried it on my end it was all working just fine.