Image for post
Image for post

Animate in Xcode Without Code

A simple library that gets things moving

Meng To
Meng To
Dec 5, 2013 · 4 min read

After I wrote about Xcode 5 for designers, I immediately felt the need to follow up with something I felt was paramount to getting more designers on board with the idea: animations.

Meet Canvas — Because layout codes can be overwhelming in Xcode, we try to make Canvas as lightweight and powerful as possible. Our goal is to speed up iOS development tenfold by using a plug and play library that solves the most common layout needs so you can focus on the things that set your App apart. Examples are Animations, Custom Fonts, Sounds, Background Blur, Dialogs, Rich Text, etc. that not readily available in Xcode.

Download the Canvas Xcode App

Usage With Xcode Storyboard

Last week, @jamztang, our iOS engineer showed me how to create functions that would directly connect with Storyboard using the Identity’s Inspector’s Runtime Attributes. That basically means that you don’t have to code to run functions. With a simple Animations library, you can reference these animations with properties such as delay and duration. Just like Animate.css, but for iOS development.

Install CocoaPods

CocoaPods is a library management for iOS — pretty much like Bower (web) or NPM (node).

Embed in View

Usage with Code

Wait, what? Coding is optional at this point, but if you want to take it further — like being able to start an animation when a button is pressed, you gotta reference things.

Each screen is connected to a ViewController.h/.m. That’s where you can code your UI.


Our ambition for Canvas is much bigger than Animations. We want to allow designers to do all the things they dream of doing with as little code as possible. So with that goal, we put together a few missing pieces from vanilla Xcode.

Custom Fonts

Blurred Background

Light Status Bar

iOS 7 makes it pretty hard to change from a black Status bar to light. In addition, the loading screen’s theme is separate from the main app’s.

Download Ripple-demo 1.1

You’ve come this far since my last Xcode tutorial. I updated the project with these cool animations, CocoaPods and customizations, so go ahead and play with it! Unfortunately, I can’t share the font files, so you’d have to use your own.

Download Ripple 1.1

What’s Coming

We want to add more animations to the library. Also, more attributes to the Animations such as Ease-In/Out, Enter/Exit, Distance, etc.

For Components, we aim to bring Parallax, Sticky headers, Onboarding, Blurred Background and a whole range of customizations not readily available in Xcode, both via Storyboard and through code.

More tutorials coming soon as we release these new components!

We Need Your Help

We poured many hours into this project: the iOS App,, the Ripple demo and the CocoaPod library and all the tutorials. If you like it, please share it around. We’d love to hear your feedback on how to make it better! :)

Follow the project: @canvaspod

Or the people behind this: @mengto, @jamztang

Special thanks to Max Tagher for his help on my very first Xcode tutorial and for his contribution with the Custom Font component!

Learning Xcode As a Designer

From Sketch to Xcode.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store