I was experimenting with ways of revealing social sharing options on the iPhone while playing in Quartz Composer (Origami). In this example app (not a real app) there is a group of images that show which of your friends have listened to this song as well. The share icon is on the right of it.

  • I created a behavior that when the sharing options are expanded, the profile photos of friends would collapse to de-clutter the space.
  • I wanted the share icon to transform into a close button. It was really important to make sure the close button replaced where the share button was so the user would not have to move his or her finger/thumb anywhere to dismiss it.

How I Did It

The animation itself is quite simple. My intention was to have the social icons seem like it exploded out of the share button.

  • Alpha is set at 0.0 and turns to 1.0.
  • Scale is at 0.8 and turns to 1.0
  • Each icon is given its own unique z-rotation to give it the impression that they are moving independently from one another (as they are).
  • I used a Bouncy Animation to give the animation a bit of friction and tension.