Creating the Path Button Effect with CSS3 and jQuery
- January 11th, 2012
- Send to Instapaper
- Tweet
TL;DR
I'm really big fan of the recent 2.0 release of social app Path. I think the design is impeccable and the little touches put it head and shoulders above competing apps like Facebook's. Concensus seems to show that one of everyone's favorite features seem to be the button interactions for adding a "moment". I set out to quickly recreate this effect with CSS3 and jQuery.
Posted Under
I have a lot to say about Path 2.0, a lot of which I intend to write up and post very shortly. Fortunately, it's a lot easier to throw together a small bit of code to emulate the interaction you get when you press the "+" button in Path. With a little bit of CSS3 and jQuery, it was a pretty easy task.
So here's what happens, in order, when you press the plus button in Path:
- The plus button rotates negative 45 degrees to become an "x"
-
6 small buttons explode out from behind the plus-now-x
- While exploding out, the small buttons are spinning
- These buttons also ease in and out at the end of their animation sequence
- When contracting back in, there's a slight delay applied to the reverse animation so that each of the smaller buttons follows just behind the one below it
I've recreated both the look of the buttons with the awesome Pictos Icon Set from Drew Wilson as well as their animation, though a bit more simplified (there's no delay outlined in step 3 above). If you want to learn how it's done, just view the source. Finally, for the sake of simplicity I've only used -webkit vendor prefixes so the demo only works in Safari or Chrome, but can easily be altered for all browsers that support CSS3 animations.