Axure RP offers a lot of power and versatility when it comes to building animated mobile app transitions. To demonstrate this point, I recently got together with our head product designer, Robert Gourley, to build out a tidy little example file showcasing a pretty cool mobile screen transition. (The prototype is part of a task flow for scheduling an appointment with our fictional healthcare provider, Classy Harbor Health.) Here’s a gif of the transition we built:
The animation in the gif is a little jumpy due to the frame rate, but the real prototype is much smoother. To check it out for yourself, download the .rp file.
The transition is all contained within a single case. Let’s take a detailed look at what the various actions in the case are doing.
Move general practice tag by (-400,0) ease in cubic 450ms
Wait 80 ms
Move nutrition tag by (-400,0) ease in cubic 450ms
Wait 80 ms
Move holistic tag by (-400,0) ease in cubic 450ms
Wait 80 ms
Move more tags icon by (-400,0) ease in cubic 450ms
These first seven actions move the little category tags leftward and off the mobile screen. (“Move” actions in Axure RP are defined using (X, Y) coordinates, so a negative “X” move action will move the targeted widget to the left.) The “move” actions do the actual moving for each tag, and the “wait” actions give the staggered effect. Try adjusting the durations of these actions to change the feel of this part of the transition animation.
Move practice general info by (0,80) ease in out cubic 500ms,
see details button by (0,80) ease in out cubic 500ms
Set Size of profile photo frame to 375 x 562 anchor top left ease in out cubic 500ms
Wait 500 ms
These next three actions constitute the down-moving portion of the animation. The third one—”set size”—enlarges the dynamic panel containing the profile photo so that more of the bottom of the image can be seen.
Move practice general info by (0,-216) ease in out cubic 650ms,
scheduling details by (0,-216) ease in out cubic 650ms
Set Size of profile photo frame to 375 x 354 anchor top left ease in out cubic 650ms
Set Size of rose to 410 x 471 anchor top left ease in out cubic 650ms
Move rose by (97,4) ease in out cubic 650ms
This last section of the case comprises the upward-moving actions you see toward the end of the transition. The last two of these—which target the “rose” image directly, as opposed to its containing dynamic panel—are responsible for making the image smaller and then repositioning it so that it’s centered in its frame by the end of the transition animation.
– – –
As always, I built this case in Axure RP using the point-and-click controls in the Case Editor dialog. The markup you see in the screenshot is the result of my pointing and clicking, not anything I had to type out.
Try modifying the animation and see what you can come up with. If you get something good, feel free to share it in the comments section. Thanks!