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

Select a layer or a screen in your transition.
Choose either “Spring” or “Classic” in the Timing section of the inspector.
Adjust the values to get the desired timing behavior.

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.

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

Flinto	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.

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.

Tension: is how tight the spring is. A high-tension spring will start moving fast and bounce more.
Friction: is how fast the object slows down. Imagine sliding a hockey puck attached to a spring across ice, or on carpet. There is less friction on ice, so it will continue to bounce longer. On carpet, it would come to rest faster.
Velocity: is the initial velocity of the movement. Adding more velocity is like throwing the object forward instead of simply releasing it. Negative velocity can be used to send the object in the opposite direction first.
Duration: can’t be modified directly for spring timing. The duration is a result of the other spring options. You can control the duration by adjusting tension, friction and velocity.

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.

Adjust transition timing