(This post is part 2 in a series. Here are part 1 and part 3.)

For this segment in our Mobile Screen Transitions series, I want to show how easy it is in Axure RP to spice up the standard slide transition animation. What I’m calling a “staggered slide” is really just a set of simple slide animations with small waiting periods between them. This is easy to do in Axure RP, where each design element in your prototype can be called on by name to be the target of an action.

Here’s an animated gif of our staggered slide transition:

And here’s how it works:

Move practice general info by (-400,0) ease in cubic 400ms,
  scheduling details by (-400,0) ease in cubic 400ms,
  profile photo frame by (-400,0) ease in cubic 400ms,
  background by (-400,0) ease in cubic 400ms
Wait 400 ms
Move calendar header by (-400,0) ease out cubic 400ms
Wait 150 ms
Move week picker by (-400,0) ease out cubic 400ms,
day picker by (-400,0) ease out cubic 500ms
Wait 150 ms
Move time picker by (-400,0) ease out cubic 400ms
Wait 150 ms
Move continue button by (-400,0) ease out cubic 400ms

As I mentioned above, this one is pretty straightforward. The first, multi-target action moves the first screen’s elements off to the left, all in unison. The second action is a “wait” of 400 ms, which provides just enough time for the outgoing elements to get off the screen. The subsequent actions then move the second screen’s elements in from the right, one at a time, with a 150 ms wait in between each one.

Download the .rp file and take it for a spin. Can you improve the feel of the transition with changes to the actions’ timing, animation model, or sequence? I’d love to see what you come up with!

Share this: