How to Animate an Icon in After Effects

[@leodaviaud7466]

this man deserves billions!

[@jesusjoanmoisescastillojes8537]

You will definitely become the top 1 who makes cracks

[@Acute_Mango]

I'm sure there must be many videos about this subject out there, but this is the first one I found on KZbin after searching for what felt like ages that actually helped me out. Amazing content and nice pacing. Thank you!

[@UXinMotionNet]

Ha yeah I know the feeling. Thank you for the kind words :)

[@juangutierrez6982]

OMG thank you so much I needed this editor so bad you're one of the legit ones and i respect u a lot for that

[@legoappleinc]

You have earned my subscription, my good sir.

[@UXinMotionNet]

Thanks Josh, I really appreciate it. I'll try not to let you down.

[@thedagronboron4864]

Complete! First thing made in Ae. Definitely going to have to invest one of those training tutorials when my school money comes in this month. For some reason, seeing a video of someone speaking through it helps me understand it better. Maybe because its more like an actual class? Anyways, thanks for this video!

[@UXinMotionNet]

Hey Lauren, thanks for the comment. I want to understand, are you saying it would be easier to understand if I was physically on camera? This is something I've been thinking of doing...

[@dineshn739]

good work king, love you

[@rodoraya]

I thought you were the brother of Mark Zuckerberg

[@UXinMotionNet]

Haaaa that's awesome :)

[@pitchayapakk.8892]

I was thinking the same thing!

[@rodoraya]

just kidding :P; nice tutorial

[@varimba5335]

lel me to. after first second i went into the comments xD

[@ferfleur]

Me too! He has the face of a rich genius! Lucky him! ^_____^

[@abhisheknb1647]

Good tutorial .In which format should we export it and how should we use it in a ui design

[@dlsn4fkd]

Thank you... You saved my life with your tutorials

[@UXinMotionNet]

Awww I don't know about that, but thank you!

[@hirnip1986]

Thank you so much Sensei! You are a blessing!

[@BHokke]

Nice tutorial. Loved how you explained the different keyboard shortcuts, very helpfull!

[@realmeee]

i love your tutorials ! specially the part when u say "dude ! "

[@UXinMotionNet]

Haaa yeah I attribute that to brain damage. I was dropped on my head when I was a baby. True story. I have a scar and everything.

[@zapper82]

good tutorial. I notice you don't use a mouse, so you probably don't notice anymore but you are pretty quick with the hot keys, and at times it's hard to keep up. I think that a lot of the hot keys you use ARE valuable to see in active use, and this tends to get glossed over in many other tuts, so well done!

[@UXinMotionNet]

Thanks man. Yeah good feedback, I'll try to slow down a bit...

[@joedkingcity631]

thanks, downloaded, all works!

[@luiza73]

one of the best tutorials! tks

[@UXinMotionNet]

Awww thanks! :)

[@sommertime2436]

Thanks for tutorial. Easy to follow and learn on the go!

[@gopidani]

the program works without any bugs

[@sashaoleynik3163]

It work! thanks :3

[@CodeandMotion]

Lovely tutorial, nice and specific channel. Love it

[@UXinMotionNet]

Awww thanks :)

[@jesusjoanmoisescastillojes8537]

thank u helped me a lot

[@benjamintan6155]

Oh yes which video were you referring to 15:39?

[@benjaminpastrana9662]

😱excellent tutorial! Learned a lot👍🏻👍🏻👍🏻

[@UXinMotionNet]

Thanks Benjamin!

[@tw_ghost5672]

If it is intriguing to you, you won't be forgetting it easily

[@benjamintan6155]

Great tutorial. Really well explained.

[@UXinMotionNet]

Thanks!

[@gregorychan6878]

thank you so much , it worked :)

[@snowliu3564]

still working! Thanks!

[@unradt2547]

Great Explanation! :)

[@UXinMotionNet]

Thanks so much!

[@anvartaishev2874]

Спасибо! Как раз то, что надо!

[@UXinMotionNet]

You're welcome :)

[@beatsmovesdancestudio2032]

Nice. Thanks a lot actually. It worked, you exp

[@snehanjan]

Loved it. Great work, just the thing i was looking for!

[@UXinMotionNet]

Awesome, thank you!

[@kunalmore6733]

Works fine

[@mateuszkusz5593]

Big thanks for the tutorial! It helped me alot :)

[@UXinMotionNet]

Swee, that rocks! Thanks for letting me know!

[@trooper6697]

Super great tutorial! You explain everything in minute details, thanks a lot. I'm subscribing!

[@UXinMotionNet]

Thanks Nit! Appreciate the kind words.

[@TheRGEstudios]

THANKS!!!

[@UXinMotionNet]

You're super welcome :)

[@afifahsan]

thanks man. you are Great.

[@adhithyavijai9800]

great video! Thanks a lot for the lesson :)

[@bestjoeroganclipsofficial]

Can't believe tNice tutorials is free

[@hanoimuaxuan]

I like your style.

[@franktielemans6624]

1:46 is that tutorial for beginners still available?

[@UXinMotionNet]

I took it down for the time being. In the meantime, you can check this out: www.uxinmotion.com/Free-UI-Animation-Course covers a lot of the same material.

[@erdalsolak1918]

working for today

[@quesada90]

Great tutorial! I'm a beginner on UI design, could you explain me how can I turn affter effects animations to code. It's look to nice the animation but i don't know if it going to be the same in code.

[@mesosalih]

Javier, you can use Lottie! airbnb.design/lottie

[@ajayverma-fs8fg]

Very helpful

[@UXinMotionNet]

Thanks man!

[@ToddBrison]

Great tutorial and technique! Thanks :)

[@UXinMotionNet]

Thanks!

[@WiraNunes]

Tks for the tutorial :)

[@UXTips]

I love After Effects but I would like to understand what are the benefits of using this over Principle App. Thanks!

[@UXinMotionNet]

Hey if you're getting everything you need from Principle, that's awesome. If you need extra features and tools that aren't possible in Principle, you can use AE. Basically there aren't any limitations in terms of what you can create in AE, that's why 99% of all the UI animation you see online was made in AE. But Principle is awesome!!!

[@UXTips]

Thanks for your response! yes I think AE offers more options and freedom but Principle has some features to prototype faster. I will give AE a try with your tutorials because the good with it is that its useful for other tons of things! :D Thanks!

[@marthacastro6546]

Thanks

[@fredericklee4475]

Thank you so much for sharing :)

[@YoYo-bt2kw]

I didn't know Zuckerberg makes tutorials! Wow, thanks!

[@MaxXxipanda]

Hey, nice tutorial! Could you explain how you export the animation? Do you export is as GIF?

[@UXinMotionNet]

I export it as uncompressed and then create the GIF in photoshop.

[@MaxXxipanda]

yes, that's what i tried today too. thanks a lot :)

[@UXinMotionNet]

Sweet, glad that works!

[@AntonioVolino]

Hi thanks for your tutorial, everything is awesome, but I've a question about the next step: How the developer can he integrate it in the development?

[@UXinMotionNet]

By using Bodymovin and Lottie. Easy!

[@hibiscusflower5911]

I'm animating part of my resume to apply for an internship in UX, I'm glad I found you! I thought it was strange at first to see a wall of stickies in your intro. Why do you typically work from P.S to after effects? why is the workflow better than working from illustrator to after effects? is it because you use a lot of raster images in your UI?

[@UXinMotionNet]

Hey Zoe, awesome questions and I'm sorry it took me a while to respond. Yeah my life runs on stickies :) I plan all my projects with stickies. You know, my preferred workflow is from Illustrator. I find a lot of folks design in Photoshop, which is why I have a primer in my paid tutorials on how to go from Illustrator to AE. I've spent a lot of time going through the pros and cons of Photoshop to AE vs Illustrator to AE. Ultimately, I think it depends on what your project is. Animating data is waaay easer from AE, for example.

[@stilbaykusu]

Hello. I have a question. When I creat shape from my vector layers it makes their color grey. What should I do ?

[@UXinMotionNet]

That is weird and annoying. I feel your frustration. I guess if you can't figure it out, just manually change the color.

[@shrajalshrivastava8327]

Hey there! I've been trying to download the source file, but it seems like there might be a glitch with the CTA button. 🚫 Clicking on it redirects me to a # instead of initiating the download. 😕 I really appreciate the content you've shared, and I was looking forward to exploring the source material. Any chance you could check the link or provide an alternative way to access the source file? 🙏 Thanks a bunch! 👍

[@skylarrichard6919]

If you're bringing in your vectors from AI is there any way after you are finished working in AE to export as an SVG animation in CSS (or just something to pass off to a dev)? Great video, will be purchasing some of your content soon!

[@UXinMotionNet]

Thanks Skylar! Yeah great question. I tend to work with the devs, deliver final renders and then redline the animation using Illustrator. I know there are some other export options but this usually works best for my needs. In general, I try to do the least amount of work to communicate the design at 100%.

[@UXinMotionNet]

This is a really lame answer by the way :(

[@skylarrichard6919]

haha, no worries. So is the answer no?

[@CVTEEMV22]

Finally Mins later cos out with the soft

[@rovendaclag8706]

ive been using softex but its uses way too much CPU and distorts content. other plugins dont. why?

[@d2ka]

Hey really nice tutorial but do you plan to make 2nd and 3rd video at your website available? When could you deliver them? You said shortly a year ago :) The first lesson was very cool and I think you are a good teacher. Hope to see them some day :)

[@UXinMotionNet]

+Dariusz Delanowski Shoot yeah man, you're so right. Thanks for calling me out on that :) And thanks for the kind words. I've got a list of a few things that really need to happen. I've been so focused on content creation a few things have slipped through the cracks, notably the 2nd and 3rd videos. Because you're so awesome, I'm posting the link here to all the videos - uxinmotion.net/awesomesauce Enjoy! I'll most likely have them up for a couple weeks while I re-tool my system.

[@d2ka]

+uxinmotion.net That is very nice. Thank you. I'm waiting for other tutorials.

[@UXinMotionNet]

+Dariusz Delanowski Awesome! Which ones? Give me some ideas :)

[@d2ka]

+uxinmotion.net The most important for me is to learn how to animate ui from psd and export high quality and as small as possible gif's for online portfolio. So basically your free course on uxinmotion will cover that if the other videos will be available (lesson 2 and 3). Also I'm interested in how to animate graphic creation process like here fatcolors.pl/wp-content/uploads/metal-f-animation.gif but I'm not sure that this is your thing

[@UXinMotionNet]

Dude you've given me the perfect idea. I'm wrapping up a whole tutorial package on Dashboard Animations and then I'm going to finally get my 3 videos up that will include the 'Fast Start' for beginners all the way to exporting animated gifs for portfolio presentation. I'm sorry it's taken me a while. This whole thing has been a learning curve for me and I get that you need to learn this stuff ASAP. Sometimes it sucks being only one guy :(

[@ferfleur]

Thank you so much!

[@UXinMotionNet]

You are very welcome :)

[@mattving61]

Great tut! I think there's some updates to the newest versions of AE. It appears that.ai files are automatically imported as shape layers. And I don't see the same process with the path trim tool. Maybe an update? Or notes?

[@SaadDesign]

Hi, I am saad ibn sayed.When i do UI animation in after effect ,i can't test my animation in mobile.So how i can do this???? Please make a tutorial for that.

[@UXinMotionNet]

Hey Saad, you can test this now using Lottie. It's amazing!

[@haniidesigner]

thank you!!

[@UXinMotionNet]

You're welcome!

[@ZmMia]

Hi. thanks for the tutorial. A question: does it work with outline stroke? Because I dont usually create my own icons (to save time honestly). Thanks again.

[@UXinMotionNet]

Hey Mia, great question, you could maybe fuss with it to work with outline stroke, but your best bet is to have the actual path...

[@justsuperjl]

Hi, was wondering about your comment on the 60fps. Any reason for this? Is it a typical standard for this type of animations? Thanks for the video!

[@UXinMotionNet]

+JL Hey yeah great question. 60fps gives you a much smoother animation and more frames to play with. You can work at any fps you want. I used to jam in 24 until I got that UI animation is NOT film. The animations at 60fps play back better and feel much cleaner. Hope this helps.

[@justsuperjl]

Thanks a lot!

[@netox187]

+uxinmotion.net I've already learn a lot from you and I'm really glad and thank you so much. One tutorial that I'm missing is how to export animated gif in good quality when this all animation stuff is over. Could you help me a little how to set up media encoder for best quality gif?

[@UXinMotionNet]

Hey Tony, first of all, you're very welcome, and I appreciate the comment. I did some digging and you can't export a gif from Adobe Media Encoder on the mac (which is what I use). I go through Photoshop. I have a tutorial for that on my paid training but I think I should make it a free tutorial... It's super important to know and a few tweaks can make a huge difference.

[@netox187]

Yes you can :) (i.imgur.com/tIaFMIs.png) There is even preset for this that you can highly modify and what I didn't expect that lest say 10 seconds/25 frames gif animations are too heavy or too awful. I can't find the golden ratio and perfect settings :/

[@evelynkaviani6470]

I'm trying to create my own version. For some reason when I import the illustration file and apply trim paths on each shape, it outlines and then fills the vector shape unlike you're tutorial. Basically it doesn't act as if I built the shapes in illustrator and fills the negative space. Any ideas on what I'm doing wrong?

[@UXinMotionNet]

Yes you have a fill going on somehow. You just need a stroke. No fill. And make sure they're not outlined strokes. Like real strokes.

[@rgenericson5361]

I would like to know how you got such nice anti aliased edges on the strokes exported from AI. The stroke edges look great in AI but when exported and imported to AE the edges are horrendously aliased/jagged. I ran similar tests with Sketch using the Sketch2AE export plugin and do not have those issues. So what is your secret? if I may ask. Thx for any feedback!

[@cathyseo9799]

Big thanks for the tutorial! I'm curious Is this interaction designer's work? or UI designer's work? or product designer's work?

[@ministryofgirl]

Cathy Seo it can be all 3!

[@NeverGiveUpvs]

3 times did not start, but then it worked

[@sukanya-101]

Great tutorial:) I'm having a problem though...I'm using After Effects Cs4 and there's no option at all called "create shapes from vector layer". Please do help. Thanks.

[@UXinMotionNet]

Hmmm that's weird. Are you bringing your layer in from Illustrator? And it's a vector layer drawn in Illustrator? I think the option should be there. Let me know!

[@sukanya-101]

Yep I'm following the exact steps as in your tutorial. 1. while importing, in the 'Import as' drop-down, there are three options: 'Footage', 'Composition' and 'Composition-Cropped layers'. Nothing that says 'composition-retain layer sizes' 2."create shapes from vector layers" option is grayed out. So are the "create masks....", "convert to editable..." , etc options.

[@ubaidomar]

Apply " Create Shapes from vector layer" separately.

[@tunlent9579]

why i can't find creat shape from vactor layer??this function doesnt exist in ae 5.5??

[@thanveerriosis6443]

Can you please tell me how to export this for android development?

[@UXinMotionNet]

Hi yeah you can use the Bodymovin plugin or the Lottie Files After Effects plugin (free). I recommend the latter because it enables testing before handoff. This will export a JSON file that you can hand to your engineers but check first that they're cool with this.

[@UXinMotionNet]

Or try the new free awesome LottieFiles After Effects Plugin here: lottiefiles.com/plugins/after-effects

[@JohnDrach]

I've seen there is a plugin that will transform your AE animations into animated svg. have you tried that out?

[@UXinMotionNet]

I haven't tried it, but it makes sense and sounds awesome

[@leohalliday9301]

nice

[@guilhermesempiterno]

what if you want to do this with an icon that's composed of vector shapes, not paths? I'm trying to use this method, but the trimming doesn't "go" along the direction of the shape, it just trims it weirdly. Any help? Thks

[@guilhermesempiterno]

Never mind, just figured it out using the angle offset property on the trim path, changing it along the way

[@TheFuryeagle]

So after that what do i do? How do i export it so i can use it in my android app? which extension and how to code it? Thanks!

[@UXinMotionNet]

Well, now you can use this thing called Lottie made by Airbnb to export your project directly. Otherwise, you can render a movie for your developers to guide them. There are a few other workflows out there.

[@TheFuryeagle]

Thanks!

[@RobinWilliams002]

thanks zuckerberg...nice tutorial! :)

[@UXinMotionNet]

Hard to find time while I'm running FB, but the effort is totally worth it

[@moktadirjafran]

nice sir...

[@UXinMotionNet]

Thank you! :)

[@sign0ff]

Does this work on a full UI? I have some gradients in mine and when I try to create the vectors all the layers go gray.. maybe I'm doing something wrong?!

[@sign0ff]

Found the answear, your way is a workarround that works ONLY with solid lines and shapes, this way ( www.quora.com/How-do-I-convert-a-layer-to-a-mask-in-After-Effects ) works on everything, dotted lines, gradients transparents etc.

[@UXinMotionNet]

Yep, works on everything. You may need to manually add the gradient back as a fill to your shape layer if you're coming in from Illustrator.

[@grillorenanmendes5688]

Please help to create a soft.

[@ahmedhesham3092]

soft source?

[@СимонаКолева-п9с]

Even though I import my file as composition, retaining the layers, and even in illustrator I release to layers, they don't seem to appear in after effects. Anyone have an idea what the problem might be?

[@UXinMotionNet]

Make sure they're actual layers and NOT sub layers. It's confusing I know. Also, if the eyeball on the layers is off in AI they will appear in AE with the eyeball off as well.

[@СимонаКолева-п9с]

@@UXinMotionNet thank you! I spent hours and hours trying to figure it out. For anyone else with the same issue, it might help to check the Create PDF box as well when saving the AI file - for some reason it worked out for me because of that.

[@UXinMotionNet]

@@СимонаКолева-п9с Yes totally. You're 100% correct. I can't even believe they make us do that. Why would we not want it to be PDF compatible? Sorry I missed that, and thanks for the tip.

[@СимонаКолева-п9с]

@@UXinMotionNet Actually I thought i got it right, but it turns out I didn't.. now that I have my separate layers in After Effects, my lines only have fill and not stroke, so I can't actually animate them using trim paths. Do you know why that happens and how I can fix it?

[@UXinMotionNet]

@@СимонаКолева-п9с Hmmm it's so hard to say. When my files aren't working, I do a test file with a single shape and debug from there. It sounds like it should work. You have to covert the illustrator paths to vector shapes in AE. Once you do that you can add the stroke and then trim paths.

[@flcanga]

where can i find some free 3D templates for transitions in CS6 for MAc. Can u help

[@UXinMotionNet]

Dang, no clue :(

[@boniaditya]

Unable to download the source files

[@UXinMotionNet]

Dang it. Can you try again?

[@konveksionline]

why can't I create shapes from vector layers although i already used illustrator?

[@UXinMotionNet]

Weird. Is the asset vector? With type objects I've seen problems.

[@graficagaravelo7918]

I bought soft soft today!

[@nuraqilahfaiz328]

Hi do you know why my path did not move straight but diagonally and some has color fill in it when it moves. Is very weird. Is it because of the stroke?

[@sebastiancardenas4285]

did you figure it out? i have the same problem

[@nuraqilahfaiz328]

Nak4dAlly REKT hi i did figure it out. Your stroke has to be a basic solid line. Do not change the strokes. :)

[@sebastiancardenas4285]

so it can only be 1pt? does it work with paintbrushes or pen too?, thanks

[@nuraqilahfaiz328]

Nak4dAlly REKT it can be in any pt size but the stroke have to be basic solid. Not sure about other brushes though. You can try.

[@sebastiancardenas4285]

tysm u get sub

[@konveksionline]

why is my trim path not becoming a stroke, but instead it's like filled shape?

[@UXinMotionNet]

Hmm that's weird. Did you check to make sure you have a stroke added and not a fill? You can always hide the stroke/fill by using the 'eyeball' on the left side and hide it.

[@itoverview-awesomeandroida1492]

Good turorial :D

[@UXinMotionNet]

Thank you! :)

[@ZarcksTV]

was sowhere where I couldn't get my stuff. Now 3, I looked for help, watched video upon video after video and on and on. About a

[@oanhle4751]

why is my gms different then yours?

[@tamannaahadi870]

Great tutorial! Thanks Zuckerberg 😊

[@ManinderjitSingh-lk7vh]

We adobe after effects rd

[@bouncer812]

You're going way too fast especially on the import settings part. My AE ui looks totally different, I don't see a "composition layer size" option when I import my .ai file

[@bouncer812]

Adding the Trim effect isn't working the same as it is working for you...it won't follow the path of my object, instead it's following the "fill" then the "stroke" I am using a circle for a shape.

[@LarnelleChambers]

Turn folks off in illustrator. Then go to file import composition in AE

[@markgabbidon5859]

Looking like zuckaberg! LOL

[@Mygo666]

Nice tutorial, your website is broken in so many places, download buttons do nothing, it was impossible to find this video on your website besides clicking download assets... Comment section didn't make much sense to order oldest comments to show up first. But you got sticky notes in your background so i know you are a real ux person at least...

[@UXinMotionNet]

Haaa love the comment about the sticky notes. Yeah I hear you. You just listed all the things on my list that I need to fix. It's tough alternating between creating content and working on the site. Being one person, sometimes I need to let some things slide on the site to get the content up. No excuse, and I get that when I let things slide, it affects you the user. Thank you for the comment, you're motivating me to get these things handled.

[@Mygo666]

I'm glad you liked the comment, and i apologise for the passive aggressive tone. I wanted to gauge your reaction to see what type of person you are. You should really fix those issues, the site drags credibility down to the point of questioning. I understand that asset links can break sometimes, but i got really pissed off when i tried to watch a video through your site and ended up in a dead end page with a picture of the video as the background.

[@UXinMotionNet]

Yeah man that totally sucks. It's funny, online I'm pretty quick to over-react to comments, but creating these tutorials has really developed me in being patient really getting that people just want to learn cool stuff and keep things positive. I totally get you testing the waters :) I do the same! Is there any chance you could take 10 minutes and put together an audit of my site and rate the things that need changing? Feel free to decline, it never hurts to ask :) I would really find your comments extremely helpful. Also, which page had the dead link? I really need to fix that beast. Thanks man, again, really appreciate the comments.

[@Alexs321432]

Possible Solution - make tutorial videos on elements of the site. Then as viewers feel like we know a bit involved and relatable?

[@mosaabosweilem]

hey you if you told me that you are marck zokerberg I would have believed you! you Looks like to him!!

[@juancarlosgzrz]

The ugly twin of Mark Zuckerberg

[@dylanbloomfield3196]

You look at the comnt and is like "that's a relatable comnt" you look at the replies and lost hope in humanity

[@indigisocialbyte7282]

You Zuck... Just kidding... Great tutorial

[@UXinMotionNet]

Haaa thank you :) Yeah definitely no relation :)

[@movie-relax1177]

คล้าย เจ้าของ Facebook ^^

[@abdelazizdaoui5257]

Did you end up making a ?