Adjust transition timing

Controlling the timing of elements in your transition is important for getting things to move just right. Good transitions are usually fast, and provide just enough movement to call attention to what’s important or to help users build a mental model of what’s happening in the app that you are prototyping.

To Adjust Timing

Spring Timing

There are two types of springs available.

UIKit

This spring’s options match the parameters to Apple’s UIKit Spring for easy handoff to developer trying to match springs designed in Flinto for Mac.

This chart shows the names used in Flinto for Mac and their corresponding UIKit parameter values.

Flinto for Mac UIKit
Damping usingSpringWithDamping
Velocity initialSpringVelocity
Duration duration


As an example, if you set damping 0.8, velocity 0, duration 300ms, this is what the actual UIKit API call looks like:

UIView.animateWithDuration(0.3,
                    delay: 0,
   usingSpringWithDamping: 0.8,
    initialSpringVelocity: 0,
                  options: nil,
               animations: { // move layers, change opacity, etc },
               completion: nil)

RK4

A natural-looking spring that is more intuitive to modify. Flinto provides an open source Swift implementation of this spring algorithm for deveopers to use if they would like to match spring values from Flinto for Mac.

The spring timing option creates a virtual spring which helps create a realistic “physical” movement to layers in your transition. The timing graph shows a preview of the spring’s movement and it updates as you change the Tension, Friction and Velocity values.

Classic Timing

Classic timing provides a Cubic Bézier curve that defines the easing of a layer. You can choose one of our preset curves, or drag the handles of the curve to directly modify it.

The graph shown represents how much of the animation is completed over time. If the line curves up sharply to the top and then flattens out, the animation will move quickly at first, and then slow down. If the line is straight from one corner to the other, the layer will move at a constant speed. If the line curves up slowly at first then sharply at the end, the layer will move slow and then speed up at the end.

A duration in milliseconds can be chosen to determine how long the animation will take to complete.

Milliseconds: There are 1,000 milliseconds in one second. So 500 milliseconds is half a second, and 250 milliseconds is 1/4 of a second.

Delay

Whether you use spring or classic easing, you can set a delay in milliseconds. The animation will start after the amount of milliseconds you specify.

Default Timing

Whenever you change the Timing, the current values become the default for the next layer that you modify. This makes it easy to keep consistent timing values between lots of layers.

Copying Timing Values

Below the timing inspector you’ll notice a text field with a value like bezier(0.42, 0, 0.58, 1). This is a text representation of your easing which you can copy and paste. Pasting this value into another layer, will change it’s timing values to match.