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.

Tools used

Author Notes

Chapters

  1. What are spring animations?
  2. Import Designs from Figma, Sketch and Xd to After Effects
  3. Creating spring animations in Ae
  4. Android spring parameters
  5. Spring animations on scale
  6. Implementing springs in Android, iOS and React
  7. Converting spring parameters between Android, iOS and React
  8. Overlapping actions
  9. 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.

Learn More

 

Submit

If you would like to submit a piece for inclusion in our INSPIRATION category please submit it to us here or tag #aescripts on Instagram.