Animate an Icon in After Effects for Lottie
Animate an icon from the Hero Icon library with After Effects - ready for use with Lottie.
Animating a Mockup Update
Instead of rendering a video, you can use the LottieFiles Figma plugin to render a GIF from your JSON file for use within your Figma prototypes.
https://www.figma.com/community/plugi...
Contents
0:00 - Introduction
0:30 - Preparing Our Hero Icon
https://heroicons.com/
3:10 - Export Icon to SVG
3:32 - Export SVG to AI
3:51 - Setting Up After Effects Composition
4:23 - Creating & Organising Shapes
5:20 - Animating the Check
7:30 - Animating the Circle
8:23 - Offset the Circle
10:46 - Adjusting the Timing
12:04 - Install Bodymovin
https://aescripts.com/bodymovin/
12:34 - Exporting to Lottie with Bodymovin
14:21 - Animating a mockup
17:13 - Conclusion
Stay in touch
/ jgeizerux
https://dribbble.com/jordangeizer/
https://jordangeizer.com/
Music from Uppbeat:
https://uppbeat.io/t/zayner/babel
License code: DQ7DBO1Q1JBENXAK
Watch video Animate an Icon in After Effects for Lottie online without registration, duration hours minute second in high quality. This video was added by user Jordan Geizer 07 October 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,159 once and liked it 98 people.