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,


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.


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