For the third and final post in our Mobile Transitions series (part 1, part 2), I’ve pulled together the animations from the first two posts into a single file for your easy reference and enjoyment. I’ve also added a third case which resets the prototype to its initial state, so you can click through the sequence over and over (and over) without having to refresh your browser window.
While I was at it, I decided to have some fun with the reset case by giving it an animation too. I’ve borrowed a technique from Google’s Material Motion guidelines called a radial transformation. To quote Google on the subject: “Radial transformations are symmetrical, circular visualizations that originate from a user’s point of touch. They are commonly used on circular surfaces that morph into other shapes.” Click that link above to see Google’s animated example of a radial transformation, and then download my example .rp file to check out my version. Okay, if you insist, here’s a recording of my version—but be aware that the framerate of this gif doesn’t quite do justice to the real thing:
The case powering this animation is longer than those in my previous posts in this series, but not necessarily because it’s more complex. (A lot of the case is simply doing the work of returning all of the widgets in the design to their starting positions so that the series of three animations can be run again.) Here’s the breakdown:
Set Size of material circle to 40 x 40 anchor top left,
material circle bg to 40 x 40 anchor top left
Move material circle to ([[Cursor.x – 20]],[[Cursor.y – 20]]),
material circle bg to ([[Cursor.x – 20]],[[Cursor.y – 20]])
You’ll see when you download the .rp file that there are a couple of supersized, circular shape widgets hanging out in state 1 of the “viewport” dynamic panel, where all of the project’s content is located. These circles are the things you see growing to cover the screen during the radial transformation. I made them start out really big because all widgets are converted to static images (instead of vector art) in the HTML output, and I didn’t want the circular edges of my radial transformation to be jagged and “lossy”.
The first part of my case shrinks the circles down to 40 x 40 pixels and then positions them so that they’re centered on the point where the mouse cursor just clicked. This means that the radial transition will begin from your cursor point! Try clicking toward the left side of the “Continue” button one time and toward the right side the next time in order to see the effect.
Set Size of material circle to 1400 x 1400 anchor center ease out cubic 500ms,
material circle bg to 1400 x 1400 anchor center ease out cubic 500ms
Move material circle to (188,334) ease out cubic 500ms,
material circle bg to (188,334) ease out cubic 400ms
Wait 100 ms
Hide material circle fade 400 ms
Wait 700 ms
This is the flashy part. The “set size” action grows the circles so that they’ll cover the screen. I chose a nice, round 500ms duration for the action’s animation because that’s what felt to me the most like the Google example animation, but you can use 400, or 600, or 523, or 10,000, or whatever you feel like.
The second action in this section, a “move”, shifts the centers of the circles from the mouse cursor point to the center of the design. (An iPhone 7’s viewport dimensions are 375 x 667 pixels. 375 / 2 = 188, and 667 / 2 = 334.) This second action happens concurrently with the first and is the same duration, so remember to adjust them both if you play around with the timing.
The “hide” action fades out the green circle so that the light-grey circle underneath it is revealed. The 100ms “wait” action before the “hide” gives just a slight delay before the fadeout happens, which felt better to me. The 700ms “wait” action after the “hide” gives time for all of the animations to finish up before the next part of the case begins, plus a couple of hundred milliseconds for the viewer’s eye to register everything that has happened and get ready for the next part.
Set Size of rose to 540 x 620 anchor top left
Move rose to (-113,-4)
Set Size of profile photo frame to 375 x 482 anchor top left
Move profile photo frame to (0,0)
Move category tags to (21,471)
Move practice general info to (22,496)
Move see details button to (22,592)
Move background to (0,0)
Move scheduling details to (22,679)
Move calendar header by (400,0),
week picker by (400,0),
day picker by (400,0),
time picker by (400,0),
continue button by (400,0)
All of these “set size” and “move” actions happen instantly, with no animation, so you won’t see them. They’re just returning all of the stuff in the design to the way it was before the first of the three animations in the prototype was executed.
Move category tags by (0,100),
practice general info by (0,100),
see details button by (0,100)
Move category tags by (0,-100) ease out cubic 800ms,
practice general info by (0,-100) ease out cubic 800ms,
see details button by (0,-100) ease out cubic 800ms
This is a little touch I added that looks like some Material Motion stuff you see in some of Google’s products. (Try tapping around in the settings menu on an Android device.) I just move a few widgets down by 100 pixels, with no animation, and then move them back into their home position with a little slide.
Hide material circle bg fade 600 ms
Wait 600 ms
Move material circle to (810,10),
material circle bg to (800,10)
Show material circle,
material circle bg
This piece fades out the grey circle, waits a bit to allow for the fadeout animation to finish, and then resets both circles so that they’re ready for next time around.