Animated icon transition in After Effects

1. Preview: I want to say that Come my manliness, I consent and animations this lesson that will show you an easy way to make give animations room. I can score any other victory, which is I can splay an important communicative role, and they have almost no language barriers. Also, the improves can ability, off device and app interfaces. Besides, Aikens can save a lot of screen space, especially in more bio design. Motion is a very powerful toe applied toe, almost anything, including user interfaces. Together with the best qualities of icons, Motion helps to create a seamless positive experience from nice and easy micro directions. One of my favorite examples is Blaine Pause Button on the YouTube website that you probably never noticed but used thousands of times. This little detail shows changing function off the same place holder in danger face, and it also looks neat and clear while removing up furnace off the moment of the change. GIF animations can be easily done in adobe after fast. You will also need Adobe Illustrator to prepare an icon for the animation, and the last thing you will need is a double for the shop. It will help you to save a proper give file. If you didn't have these programs on your computer, it is not a problem. You can download them for 30 days. Free trial. You can find the links in the project description a za result. You will have a rest arised animation transition between the two icons. Don't forget to upload your information to the project section and share your awesome work , so let's dive right into it. 2. Preparing Icons in Adobe Illustrator: In order to any made an icon, you will need to get one for these. You can check the project section there. Do I can see attached or if you want to Any made something else you can go? Do I can say that calm? There are many free vector images in different styles. And for this lesson, we will use highest. I like it will be the mailbox. Make sure you choose the victor for SVG run and in orderto have fully creditable paths that we need for animation. Uncheck these simplified SVG check box then don't love the icon and make sure you download the 2nd 1 This will be the final state of animation. You can find the same two icons in the project section as soon as you have the two I can stun loaded. Open them both. Administrator, make sure you have both states of Aiken the initial one and the final one on this step. It is better to already imagine what will be your animation, what we'll move and what will happen in our animation. The flag that is down in the first state will be rotating around the center off these little black circle and the invisible part off these stuff will appear. So in order to prepare the Aiken for the animation, we will have toe recreate these invisible part, and we will have toe making the same file. Both states off the flag, copy one of the icons and based it in the file with another one. You select the flag because we will keep it. And there d select the mailbox body path and delete all the rest because we won't need the double puffs. So I'm gonna change the color off the final mailbox body of you just to see the difference . So this little part will be visible in the first state of animation and invisible in the final one. What we need to do here is to make a mosque that move with the flag. It will rotate around this center of the circle, and it will appear right along the path of the flag. So we just choose a rectangle and created the same size us these invisible part. Okay, so the mask is also ready, so we're almost ready to animator Rikers. We just need to make a background that won't be visible in the final innovation we just needed toe. Keep the size. At this point, it's better toe already. Decide the size of your future animation because it will be difficult to scale the animation in adobe after effects and not to get any troubles with Uncle Points. And it is also impossible to scale a GIF animation not to lose inequality. So just think off the size of your future information right here at this point. And if you have any jobs, just check our article about choosing the right size and four months for icon. And there you can see what is better to different systems and guidelines. In this lesson, we are making standard size off icon for IOS. It's 50 pixels square. So now we're going to do one of the most important parts. We are going to group the right things together so that they will be in the same layer afterwards. So I'm going to group to parts of one flag and two parts off the other one just that they are not separated. Later, I leave mosque alone. I leave this circle alone and I leave that granted so all the rest that are not mask, circle flags and background are grouped together. And the important thing is here to release two layers so that everything that is grouped together will appear a separate layer. Here you're put it out of layer one. Delete the until air and rename layers so that they have the right names. So we're all set. What we need to do now is to save this file not as svg Juan, but as Adobe Illustrator one so we can import it in a adobe after effects. 3. Animating in After Effects: when you open after effects, click on new composition and set the timing here. It will affect all the future compositions we've animated. I consider, or you can adjust timing later during your work. For these, right, click on the composition in the project window and choose composition settings. And here you can set the time and the size of the composition at any moment of your work. Usually, I said 14 frames for animated Aiken transitions like the one we're going to make. It will make an animation visible, but still fast so that animations don't interrupt the user, and they wouldn't make too much visual noise. When not necessary, I will do leave thes composition now. Then, for the next step, go to import file, then choose your Adobe Illustrator file that have just created and in import as choose composition retained layer sizes. Click on in court button, then double cle come the composition that was automatically created here. Choose the layers that were important right from the out of illustrator file, right click on them and choose great shape players from Victor Files and delete the Illustrator files, and you'll have all the edit herbal baths that we will need for the animation. We will animate this little slag to rotate around the center of this little black circle and become this big flag that it's up. Zoom you to the timeline, choose the first train and then choose flagged down layer, then click on the arrow next to the name off the layer and open transform characteristics. We are going to change the rotation first, but before changing it, you have to keep in mind that this layer will rotate around the anchor point. It's not the center of the rotation that wanted to be so reaches an anchor point to and drag this anchor point right through the place where we wanted to be. Then we click on the clock next to rotation characteristic, to fix the position off the flag in as it is right now. Then we go toe 11th spring. Then you can drag, eat to sit value, for you can just type it in so as you can see during the time the flag is moving, but we can see that it is a little bit lower than they big flag that we wanted to become, So we go back to the third fring and click on the clock next position and go back to 11th spring and choosing the selection toe. We move our flag holding shift right to the place where wanted toe stand in the end of the animation. So let's see what's happening. Okay, it's moving to the place where the beak faggots standing. Now let's make the big lacked invisible to see what is happening. You can see that this legal gap here has to be fix it, and that's what we're going to do right now. We are going to the contents. We will see what grew river still water. So the path we want to fix his group tool. We opened this and we go to bath characteristic. So we go toe the third key frame to fix it in the initial state, and we go toe 11th key frame to change it to the end, retake the mental and re click with shift to de select some points and select the good one and then drag holding shift this point a little bit down. So there is no God but more. Now we can see that it is almost perfect. The only thing that is nothing. I could hear its study. This path is going a little bit out off the boundaries off the black circle, but it is not. The problem will fix it a little bit later. Eyes do not a little bit on the timeline just to see everything in total, and I heat you but on my keyboard to see just the key frames or flag down outlines. 4. Easy Ease, Mask Layer, and Export: I'm going to make the movement a little bit slower in the beginning, faster in the middle and slower towards the end so that it seems a little bit more natural for this. I simply select the key frames and press shift F nine and all of the key frames are converted to keep friends with these, it might be not that noticeable right now. They can fix it, going to graph editor and choosy and the nose and making the speed graph look like that you could make. It's even slower in the beginning in the end. Okay, now, this time to fix this half transparent pig cells on and you just find the point at which is the most visible. And then you go to this stuff characteristic, and then you choose again thes point, and with it, the place where you want it to be. Then you just review the animation and okay, you can see that nothing's pundits. Okay? You don't super. Now it's perfect. So the flag is ready, and now I'm going to animate thes blue rectangle so that it is going to move together with the flag and hide and those section off my books body part and I will put it about the mailbox Slayer. And here we're going to do approximately the same thing we did with Flag. We're going to move the anchor point first so that it is going to stand in the needle off the black circle, and now you can see that it's a position off the final state. So we goto 11th frame and fix the irritation characteristic right here. Then they go to the third frame and either drag or typing 90 degrees here so we can see that it is moving a little bit. Not like Flag. So we're going to do with the same ease. And now we can check if it follows the flag. Not yet, because we didn't edit it. His graph editor. So we're going to do that and make the graft Luke approximately like the one on the flag. So let's check you. We need to make it a little faster, somewhere more. Maybe a little floor enough. That's okay. It follows the flag at the places word should. Now we can see a little bit of a problem with mask when it overlays a little beat mailbox body parts, not a place where it should be. So what we can do here used to go to contents path and we can select them toe and select two points that we want toe and move them a little bit lower so that he doesn't drop the mailbox body where it shoot. Okay, now it's timeto make this mosque invisible and it's super easy. You just select my books outline slayer. And in this cone, do you click and shoes in the menu? I'll find verdict met mask outlines. Please make sure that this name is the same name as your mask layer. You can see that the blue rectangle is visible now and the part that it hides is Olsen. Let's see what we have here. That's pretty good. And we're down here. If you are satisfied with this result, you can save this project and then you go toe expert after vendor killed. And here well, purely in lead you where you can choose the preferences for the expert. And as you remember, we want the animation to be with transparent background. So we choose the auction lossless with Alfa and in orderto background disappear. We will delete the background there. Here you can choose the folder and the name of the animation. Let's say Black or worth and Glick Render Button. So the first part of animation that is going one way is ready. Now select all the layers, all the outlines, right click on them and click recompose and the name here doesn't matter. And here, you right, click on the player in the timeline section, then choose time and time, reverse layer and save. The project began with another name and now go toe export at to Render Queue said the same preferences lossless with alpha and choose the folder. But the name now will be black backwards Click Render back and now you will have to video files. If you're animation, we've transparent background. 5. Saving a GIF: Now we're going to go to weather before the show in order to re save our animations in the former U Goto file, Import video frames two layers and choose that safe like forward information. You open this OK? And you have a file. We've transparent background. Now you go to file export safe for web. And here please remember Tau Chou's looping options once because we didn't want the animation toe play over and over again just once Here on the safe, you can choose the folder for the GIF animation and give it the name and the export is ready. Now you do the same thing with the second animation, you go again safe and choose again looping options once you give it lyngen and save it. So we're pretty much ready way have both defending nations. Let's open them in some browser and here you can see is place months and stops. It is opened exactly the same size you created it. It has a transparent background and now we are done 6. Final words: if you're looking for an idea for an animated Aiken transition that is different from the mailbox I showed you, you can check out the page with the other animations I made there off the same type as the one in this class. If you wish to know an easy way to make any of them, please let me know. I hope you like the lesson. And if you have any questions, don't hesitate to contact me. Hope to see your project soon. And good luck, Teoh, By