[Here's How] Radial menus (and more) using transitions - new responsive

Fun with margin transitions

radial-menu-anim

 

Key points…

  • Place menu items inside an Align to parent (ATP) group.
  • Align each menu item to the relevant nonant.
  • Use negative margins to create transition offset.
     
    radial-menu-element-hierarchy

Included in working example:

  • 90 degree radial menu
  • 360 degree radial menu
  • Bottom sliding drawer
  • Hover-reveal sidebar (uses width transition)
  • Hover-reveal corner widget
15 Likes

Clever

2 Likes

Awesome, can you give us the editor link please

2 Likes

could anyone reproduce this please? :slight_smile:

I am trying something new, but have always the problem that when adding width transition to a group the content inside this group is like flashing, because it looks as if the width is adjusted in the same step, but always at the current stage.

e.g. a text is first vertical before the full width is reached.
and then, depending on the progress of the transition, one more letter is always added at the end horizontally, which leads to a broken animation.

thanks!