octocatstartv
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 ideas! :)

  5. 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 ;)

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

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

  8. @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.

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

  10. So Cool :) I Love it

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

  12. Great stuff.

  13. Pretty cool

  14. Line 39 on the scss file should be 2.5rem not 2.5em

Leave a Comment Markdown supported. Click usernames to add to comment.

You must be logged in to comment.
  • 164543 Views
  • 20 Comments
  • 1683 Hearts
Loading...
Loading...
Loading...