Skip to main content

UIKit Spring

Design spring animations in After Effects in the same way as Apple's spring animation systems in UIKit/SwiftUI and use them for implementation in Android, iOS and React!

Tutorial

More details

This expression interpolates between keyframes in the same way as the spring systems of Apple's UIKit or SwiftUI and has exactly the same parameters. It allows you to not only easily create a spring animation in After Effects, it also calculates all the parameters you need to recreate the exact same behavior with Android Spring Physics, UIKit’s UISpringTimingParameters, or SwiftUI’s interpolatingSpring and react-spring. So you can design the animations with the UIKit spring parameters and then easily implement them across all platforms so they always feel the same, whether your user is in a web app, or using an Android or Apple phone.

Creating Animations

UIKit Spring creates time-less animations, i.e. you don't specify the duration of movements or motion path curves. Instead you just specify a target position and how the object is attracted by this target position (as if your object is pulled towards that target by an invisible spring). When you apply this expression, your keyframes turn into target positions. So if you have two keyframes, for example, immediately after the first keyframe, the value is attracted by the second keyframes and moves towards it based on the spring physics parameters you set in the expression. Only the value of the keyframes is considered, the easing you set in Ae is ignored and replaced by the spring simulation. You can have as many keyframes as you want, to move the target position over time and can apply the expression to arbitrary 1D, 2D and 3D properties (and to texts for parameter conversion - see next section).

Converting Parameters

Since the expression has exactly the same spring parameters as springs in UIKit and SwiftUI spng, it is easy to implement the animation in Apple devices. But if you need to implement the same animation in Android or react, you need the corresponding parameters for those spring systems, first. To obtain those, just apply the expression to the source text of a text layer. The expression will then calculate the parameters for Android and react-spring from the UIKit/SwiftUI parameters and then output all of them on the text layer.




Download at aescripts.com