1. Web Design
  2. Animation

How to Use After Effects for Web Animation Prototypes

Scroll to top
Read Time: 1 min
Final product image
What You'll Be Creating

In this screencast tutorial we're going to prototype an app UI animation. We'll take a Photoshop layout, then bring it to life using Adobe After Effects. 

Prototyping interfaces with After Effects is a great way of exploring complex animations, either for your own experiments or presenting to a client. It's a very popular approach these days, and a quick search on Dribbble will reveal loads of UI animation examples, many of which have been made with After Effects.

The Screencast

You might also want to subscribe to our YouTube channel.


The files for this tutorial contain a number of assets, listed below:

Extra Resources

If you're new to After Effects, we'd recommend a number of introductory tutorials to get you up to speed with After Effects basics:

You can take a look at the After Effects Project Files on Envato Market.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.