How to start your UI Animation GIF on a specific frame in After Effects

Click here to download the source files and follow along

Here’s another pro UI animation tip I wanted to share with you. 

The idea is this: when you go to a site like Dribbble, you can see that the first frame of the animation is used as the ‘poster’ frame. 

Click here to learn the fastest way to start your UI Animation GIF on a specific frame in After Effects. This works on non-GIF files too, of course. 

Here’s the workflow

1. Duplicate your composition
2. Resize the canvas (if needed)
3. Move your playback head to the frame you want to be your poster
4. Split your layer
5. Swap the ends
6. Render like you mean it

Watch the video to see how it’s done. I also show you how to do this like an absolute ninja using several After Effects keyboard shortcuts. 

If you haven’t yet, go watch my tutorial on After Effects keyboard shortcuts and then drop me a comment about how I just changed your life. 

Anyway, yeah, this whole process takes about 30 seconds and you get to choose whatever frame you want to be your poster frame. 

Go be awesome.

Happy prototyping,

Issara

PS If you’re on a deadline and looking to prototype your projects at higher fidelity, check out my rapid learning UI animation courses for UX/UI/product designers.