Shop Blog Templates Affiliates About Bundles Login

How to animate a form in After Effects

Follow along and download the free 'How to animate a form' in After Effects project assets

In this tutorial, I'm going to show you how to animate a form in After Effects.

I was working on a project a few weeks back and wanted to share with you how I would animate the cool growing line form thing that turns into a check mark.

 

Essentially, what we have here is a simpler, more reduced version of my tutorial ‘how to animate an icon in After Effects’ where you need to physically draw out shapes that look weird.

When you use the ‘trim paths’ feature, it becomes awesome.

The thing that I love about this is that it’s simple, quick to build, looks rad, uses motion to promote usability, and can be exported to your engineers as a JSON file for them to implemented directly into your product using the Lottie framework.

That’s a ton of wins. Like a huge pile of wins. A veritable cornucopia of wins, if you will.

You would use the Bodymovin plugin to do export the JSON file from After Effects. Let me know if you want to see this and I can record a quick tutorial for you.

In this tutorial I also show you how to use the ‘write on’ feature in AE that lets you simulate text being typed using AE presets. I personally never use presets except for this one. The presets are extremely awesome… for 1992.

In recording this, I was super lazy and didn’t animate the finger taps on the keyboard, because who wants to do that? I hope you forgive me.

🔥 Save 15% on any UI animation course or bundle on uxinmotion.com

Join my mailing list to receive a one time coupon, plus the latest news and updates from me. Don't worry, your information will not be shared.

Click here for coupon

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

Close

🔥 Take 15% off your first purchase

90% Complete