Certification Courses Live Zoom Workshops Blog Templates About Log in Get Certified Login

How to animate ‘UI jelly’ in After Effects

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 animation credit: Jakub Antalík

UI animation credit: Plady

UI animation credit: Olga Bystrova

UI animation credit: Jakub Antalík


FREE LottieFiles Icon Animation Course For UX/UI & Product Designers

Create a Professional Icon Animation and Play it on Your Phone (no experience necessary)
  • Learn how to make an icon animation in Adobe After Effects

  • Show-off your icon animation on your phone for your team, clients, or stakeholders

  • Build a portfolio-quality showcase UI Animation 

  • Export your assets for hand-off to engineers

You're a designer, you get paid to have opinions. Share them! 👇🏽

🔥 Take 15% off your first purchase

90% Complete