Animating Code
8 minute read
Anthony Eamens profile photo
Anthony Eamens

After completing a rather complex (but very cool) secret iOS app, I thought I’d share a recap of my findings and walk through how our design team tackled the (many) animations and micro interactions involved in the project. 

We knew from the get-go that this app would feature a variety of animations, from the on-boarding screens to subtle movements on icons and buttons - and we also knew coding all the animations was out of scope for our time frame.

“Hand coding animations for iOS can be very complicated - 3rd party tools are all but essential to a good workflow.” - Iain, Product Design Partner

That said, we were up for the challenge (as always), so we started by researching tools and software that could help us achieve high quality animations and easily turn them into objective-C code.

Introducing Squall for After effects.

Squall Intro Image@2X

Squall is an impressive and powerful After effects plugin, SDK (Software Developer Kit) and iOS mirroring App which allows you to create an animation, preview it live on a mobile device, convert it into Objective-c or Swift and then include it in your app. Phenomenal. 

We hadn’t worked with a tool like this before, but we jumped straight in and decided to give Squall a spin to see what it could do.

Squall Panel@2X

Once you install Squall, it opens a small preferences window in After effects. Providing that your computer and iOS device are on the same network, connect the two so you can instantly preview your animation live on your device. It’s quick, painless, and oh-so helpful.

After playing around with Squall a bit, we were quick to find out its benefits as well as its limitation. We quickly discovered that Squall primarily focuses on animating vector shapes, which was a perfect solution for us as this ensured our graphics would be sharp and of high quality, especially for Retina iOS devices.

Squall Map Test

Squall comes with a featured called ‘Analyse’ which is excellent and invaluable. Once you’ve completed your animation and you’re ready to render it out, you can quickly run the Analyse feature which opens up a web browser page that tells you if there are any problems. If there are errors, the page provides details on what they are so you can correct them in no time.

Squall Analyze@2X

We downloaded the Squall SDK and imported our rendered .sqa file animation into our Xcode project. This proved successful as we were able to preview the animation on the device within minutes. We had found the perfect solution.

Our first polished animation are the map markers you’re looking at below. The animation needed to illustrate ‘Location Settings’ within the app and reinforce the importance of having these settings on to users. 

Location-primer.gif#asset:1382

Throughout the entire project, we worked closely with our client’s creative team to make sure every aspect of the animations were on brand, including subtleties like bounce and ease on elements which strengthened the brand’s playful aesthetic. Once we had completed the ‘Location Settings’ animation, we were ready to explore micro animations and on-boarding.

Micro-interaction-02.gif#asset:1398

In order to create a playful and enjoyable experience from beginning to end, we explored a variety of micro animations including empty states, directional pop up messages, subtle icon transitions and even pre-loaders and spinners. 

As Squall is primarily used to animate vectors, this made the process a lot easier as we were able to produce clean vector files in Adobe Illustrator, import them into Adobe After Effects and then convert them to Shape layers for animation purposes. If a vector needed editing, we were able to do so in After effects as it maintained its anchor points and allowed you to move them. 

The micro animations were signed off, and we then moved towards the on-boarding process. We knew this would be difficult as the animation would be far more complex than those we’d created in previous sprints. On top of that, the user had to be able to control the animation based on their scroll position. 

The app features a unique interaction which combines both the physical and digital worlds. It also includes a particle animation which was already made by the client, and we had to work this into our own design and animations. 

Particles.gif#asset:1400

As mentioned previously, because Squall is an Adobe After effects extension, this enabled us to work purely in vector formats. First, we created high quality vector graphics in Adobe Illustrator, then we imported the files into After effects and lastly, we converted all the layers into Shape layers. The structure of the Adobe Illustrator file was organised and clean, which made the process even more efficient.

Squall Illustrator Panel@2X

squall-map-on-boarding.gif#asset:1408

Taking all our learnings from the initial process and testing, we created a variety of illustrations to fit nicely with the existing visual language and brand. We created these high quality vector graphics in Adobe Illustrators, and rendered them using Squall.  

Squall On Boarding Illustrations New

Once the vector illustrations were complete and signed of on, we then imported them individually into After effects where we could easily begin animating. To achieve the right effect for this, we animated the whole on-boarding process in one full length animation and added markers where we needed to stop each animation. We also had to ensure that the starting position and end position were the same so we could loop the playback if the user decided to scroll back. 

With the recent release of the Airbnb labs project Lottie, which is very similar to Squall (a bridge between design, animation and development), it looks like 2017 is going to see a lot more tools like this coming to fruition. 2016 was all about prototyping software, and this year we’re expecting Squall and Lottie to get a few more competitors. 

"Lottie is available on Android, and it's free. Squall on the other hand is iOS only but supports more AE features such as trim offsets, gradients, repeaters, text layers, text animations and more. You can also preview Squall right on your iOS device. And Squall can evaluate expressions at runtime allowing you to make your animations interactive."

- Markus Eckert

Squall was an essential tool for us during this process, and made the conversion of animation to code streamlined, efficient and painless. It would have taken hours (and caused some severe headaches) to develop these animations with code, so we finished off the project pretty pleased with Squall. The $99 price tag is an absolute steal, especially considering it will only improve in the future as the competition heats up. Squall will remain in my arsenal of tools, and I will without a doubt be using it for future projects.