IBAnimatable banner
IBAnimatable

Open Source

IBAnimatable Overview

A prototyping framework that lets you design and prototype UI, interaction, navigation, transition and animation for App Store ready apps in Interface Builder without writing a single line of code. IBAnimatable aims to be designer friendly with a Sketch style setting panel on Attributes Inspector to lower the learning curve for using Interface Builder. But unlike most other prototyping tools you can use the output of the design directly in your production ready apps. It also supports animation design in Swift playgrounds, Auto Layout and Size Classes and navigation and transitions using segues.

Key features:
  • 100% compatible with UIKit. All IBAnimatable APIs are extensions of UIKit. No pollutions to UIKit's APIs.
  • 100% compatible with Auto Layout and Size Classes. No custom layout system.
  • User interface design and preview in IB: corner radius, border, mask, shadow, gradient colors, tint color, blur effect etc.
  • Animation design in IB: slide in/out, fade in/out, zoom in/out, flip, pop, shake, rotate, move etc.
  • Transition design in IB: fade, slide, flip, cube, portal, fold, explosion etc.
  • Interactive gesture design in IB: pan, screen edge pan, pinch etc.
  • Presentation design in IB: flip, cover, zoom, dropdown etc.
  • Activity indicator design in IB: ball beat, ball rotate, cube transition, Pacman etc.
Here is the full design in a Storyboard in Interface Builder.

With IBAnimatable, we can design a UI in Interface Builder like what we can do in Sketch, and prototype animations in a Swift playground like what we can do in Framer. Also, we can use the output of the design directly in the production ready App.

As a designer, we love Sketch, which is a simple but yet super powerful tool to create UI. However, Sketch can't design interaction, navigation, transition and animation, and we may need another tool like Framer to design some of them. Moreover, to make an App Store ready App, we need to use Xcode and Interface Builder to implement the UI and animations. To speed up the process and minimize the waste, we create IBAnimatable to make Interface Builder designable and animatable.

Stay on top of new tools for iOS developers

Subscribe to get a convenient weekly roundup of iOS Dev Tools' newest addition
of helpful and time-saving developer tools, services, and SDKs to get your job done faster.