MENU

Fun & Interesting

How to Animate an Icon in After Effects

UX in Motion 208,199 lượt xem 9 years ago
Video Not Working? Fix It Now

πŸ‘©πŸ½β€πŸŽ“πŸ‘¨πŸ»β€πŸŽ“ Go here to watch my FREE course and learn how to Create a Professional Icon Animation and Play it on Your Phone (no experience necessary): https://bit.ly/3bzNqAX
⬇️ Also, see below to download free source files for this tutorial.

πŸ‘‰πŸ½ Download the FREE AE source files and follow along:
https://www.uxinmotion.com/blog/how-to-animate-an-icon-in-after-effects?utm_source=youtube.com&utm_medium=tutorials&utm_campaign=blog&utm_term=blog&utm_content=Y11

In this tutorial, I show you step by step how to animate an icon in After Effects.

We’ll be creating shape layers from the Adobe Illustrator file, applying trim paths on each shape, and animating it with a few simple keyframes. You’ll want to go nuts and animate all your icons after this tutorial.

The steps I will be covering include:

1. Review the design setup in Illustrator
2. Import the design into After Effects
3. Apply and animate the β€˜Trim Paths tool in After Effects
4. Keep doing it to all the icon elements
5. Finesse the timing
6. Enjoy!

Happy prototyping,
Issara

βœ… Please don't forget to subscribe for more UI animation with After Effects tutorials and resources.
-------------------------------
πŸ‘©πŸ½β€πŸŽ“πŸ‘¨πŸ»β€πŸŽ“ Go here to watch my FREE course and learn how to Create a Professional Icon Animation and Play it on Your Phone (no experience necessary): https://bit.ly/3bzNqAX

πŸ€— Find me on...

Facebook: https://www.facebook.com/uxinmotion
YouTube: https://www.youtube.com/channel/ux-in-motion
Medium: https://medium.com/ux-in-motion
Twitter: https://twitter.com/ux_in_motion
Dribbble: https://dribbble.com/issara

Comment