Transitions

How to create meaningful and delightful transitions by building content specific animations

Introduction

Creating customized and contextual transitions is an important part of creating a good user experience. Small fades, zooms and moves can be an easy way to make interfaces feel more alive and be hte finishing touch of the UX.

The animation engine of SketchMyApp allows you to create transtions customized to the content by specifying the animations for each group separately. This allows you to easily add delightful details to the standard slides and fades. For example a button can zoom in with a bounce or a list can cascade in instead of appearing simultaniously.

Hierarchy Of Transitions

Transitions are by nature hierarchical meaning that they apply both to the group where they are defined and all it's children. I.e. if you move or fade a group, all its children and their children will also be affected. This allows you build a richer, more complex animation by having each element of the group hierarchy to have custom animation schemes.

Basic case is that you define the main transition like slide or zoom at the root and some minor secondary details at individual groups. For example a page could slide in from the left, but the main action button additionally zooms in to highligh it as something you can interact with. Or text elements could fade in when slide in is almost complete.

Transition Properties

Transitions are created in practise by defining transitions properties in the same way as group properties.

Account
  • Duration: What is the length transition in seconds.
  • Delay: What is the delay in seconds before transition starts.
  • Next: What is the next transition after current one finishes creating a sequence of transitions.
  • NextDelay: What is the delay before running Next transition in seconds.
  • ChildDelay: Transition cascades to all children with this delay. E.g. Fade=0, ChildDelay=0.2 means first child fades out immediatelly, second after 0.2sec, third after 0.4sec, etc.
  • Fade: What is the target opacity for the group. I.e. 0 is transparent, 1 is fully opaque.
  • MoveX: How much is the group moved vertically with respect to original position and size. I.e. 0 means center, 1 means full width right, -0.5 half width left.
  • MoveY: How much is the group moved horizontally with respect to original position and size. I.e. 0 means center, 1 means full height up, -0.5 half height down.
  • ScaleX: How much is the group scaled vertically with respect to original size, i.e. 1.5 means 150% of original width.
  • ScaleY: How much is the group scaled horizontally with respect to original size, i.e. 1.5 means 150% of original height.
  • Zoom: How much is the group scaled with respect to original size, same as setting ScaleX and ScaleY to same value.
  • Rotate: How much is the group rotated. I.e. 1 means full circle clockwise, -0.5 means half circle counter clockwise.
  • Acceleration: What kind of acceleration function is used for transition:
    • Sine (default) - Sine wave function providing smooth acceleration and deceleration
    • Linear - Constant speed from beginning to end with no acceleration/deceleration
    • Quadratic - Quadratic polynomial providing slower acceleration and faster deceleration
    • Cubic - Cubic polynomial providing even slower acceleration and faster deceleration
    • Exponential - Exponential function providing the slowest acceleration and faster deceleration
    • Overflow - Elastic acceleration function going over limit and providing a bounce back

Example

Let's say you have a simple header with a background and icon and you want to add a small bump to the icon when the page slidein transition completes. So we want a transition for the icon that triggers a little bit before the slide in is over and scales the icon up a bit and then back to normal. We can do this by creating two transitions:

onpageenter
delay=0.95
duration=0.2
zoom=1.05
next=onpageenter2

onpageenter2
duration=0.2
zoom=1

transition

So transition triggers with the standard page slide in transition, waits 0.95sec for the slide to be almost over, zooms icon to 105% in 0.2sec (using default Sine-acceleration) and triggers phase2 that zooms back to 100%.