How to animate ‘UI jelly’ in After Effects

By August 19, 2015Tutorial

There’s something inherently powerful and cool about transforming the material of UI. By allowing the user to stretch and distort the material, the experience can become much more engaging and dynamic. Of course it can be abused as well, to the point where it impacts usability, so be conservative with this one.

In this quick 10 minute tutorial, I take you through the setup and animation using After Effects masks to create this cool effect.

Here are some references that illustrate what I mean by ‘jelly.’

UI Jelly animation

UI animation credit: Jakub Antalík

UI Jelly animation

UI animation credit: Plady

Jelly UI animation

UI animation credit: Olga Bystrova



Jelly ui animation

UI animation credit: Jakub Antalík

Oh, and before I forget, if you’re totally lost here, head over to http://uxinmotion.net, put in your email, and I’ll send you the FREE fast start video. It teaches you how to animate your UI in Adobe After Effects. And if you want to go deeper with all this, I’ve put together a pretty dope online video course that gives you step by step instructions on how to create beautiful professional animations from your UI designs. You can get it here:http://uxinmotion.net/rapid-prototyping-with-adobe-after-effects-launch/

If you’re looking to pick up the super dope Material Design UI kit that I’m using in this tutorial, you can grab it here,