Tutorial: Spring Animations in Adobe After Effects
Can't wait to see new tutorials?
Subscribe In our newsletter we share all new tutorials already before they are published. Subscribe to watch new tutorials before everybody else!
Chapters
- What are spring animations?
- Import Designs from Figma, Sketch and Xd to After Effects
- Creating spring animations in Ae
- Android spring parameters
- Spring animations on scale
- Implementing springs in Android, iOS and React
- Converting spring parameters between Android, iOS and React
- Overlapping actions
- Initial velocity parameter
Today we show you something about a little motion design niche: Designing user interface animations for mobile apps and web apps.
Learn how to first import your user interface designs from Xd, Figma or Sketch into Adobe After Effects, then create animations there using the spring tools in iExpressions. It’s not only easy to create spring animations in After Effects, they can also be easily implemented in Google’s Android, Apple’s UIKit (or SwiftUI), and Facebook’s React.
One major potential hassle is that the parameters for spring animations are different for each platform - Google, Apple and Facebook all cook their soup a little differently. Fortunately, the After Effects extension iExpressions comes to the rescue. 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 even though all these spring animation systems are very different, once you’ve designed the animation in After Effects, you’ll have an easy recipe to precisely implement the same animation across all major platforms.
Used tools:
Download iExpressions for Ae