Came across this on codepen where buttons in the header bar were animated once clicked. Good part is that it uses icon fonts so this same effect could be used with Ionic. If someone wants to play around with this and see what they can come up with, I’d love to check it out. I will post some of my own attempts when I get the chance.
1 Like
Very cool, @mhartington! Thanks for sharing. I’d love to see if these effects could be applied to Ionicons…
I’ve seen somone’s Plunker that already has animated navigation icons in the header. I’ve gone through the whole forum trying to find it, but I can’t.
When I saw it I thought it was pretty neat. So, if anyone has an existing example of Animated header icons in Ionic, please post it here.
@Ben @Calendee, So after playing around with the code pen, it seems that they’re using individual icons for the :before and :after pseudo elements. I worked up what I would describe as a “hack” to get everything together. Doesn’t seem to practical unless it could be cleaned up and optimized.
[Check it out][1]
Edit: added more examples and cleaned it up an bit
[1]: http://codepen.io/mhartington/pen/gKxuh
1 Like
Nice! I agree though that unless it’s super clean/easy to use, it’s not practical. Either way it’s fun to click and watch animate! 
I’ll see what I can do when I get the chance. I could see if I could make the one I did into a directive and figure something out. But yes, it is very fun to click and watch the animation