CodePen

Loading ..................

Navicon Transformicons

Description

Comments

  1. Love these. The transitions into arrows look especially smooth.

  2. Super cool man! Try throwing a 3d transform on your elements to fix some jankiness in chrome:

    section *, section *:before, section *:after { transform: translate3d(0,0,0); }

  3. Thanks Hakim and Michael! Noah, I've added that snippet so I think it should run smoother. Thanks!

  4. Nice :) I have some navicon animations.. if you want to see -> http://codepen.io/pedrocampos/pen/gufrx This is work with hover just to see the animations. The idea is toggle the classes on real use. Keep the good ideas on ;)

  5. The rollover & animation give them a delightful bounce - I clicked the + & x a number of times, grinning all the while. Great job!

  6. Beautiful subtleties. But can I ask how or when someone might want their navigation icon to turn into symbols? UX application is unclear to me.

  7. @carriecraver These icons could function as toggles for displaying menu. I'm not quite sure what the application for the +, -, or the loader icon could be but I think the arrows and X could be useful at least.

  8. @bennettfeely I think the - would work as a nav icon perfectly as well. It'll be like a "collapse" icon, or "show less". Makes sense to me UX-wise. :)

  9. Wow! Great UI solution - always have problems with icons for mobile UI due to lack of space... well done!

Leave a Comment Markdown supported. Double-click names to add to comment.

You must be logged in to comment.
  • 114244 Views
  • 19 Comments
  • 1203 Hearts
Loading...
Loading...