I'm just going to leave it on ease for now. You can see exactly what the animation is going to look like.įinally we've got our little animation easing options here you can go through and change it, so if you need to be a linear animation you can select that option, that will remove any easing, or you can add easing in and out, or just in or out and that's just going to change the way that the animation comes in and out of the of the frame. You can see here that it's updating the live preview in real time, so whatever animation properties you change on any keyframe that will automatically get reflected over in the live preview over here. Then finally, scale if I want to scale that element up or down, I can do that by dragging on these. Then rotation if I want to rotate the element. We've got our opacity I can fade the element. We've got our Y-axis that'll go up and down. Then the most interesting part is the keyframe properties settings these five properties are what you can actually change to get the keyframe animations looking like they're moving, so we've got our X-axis it's left to right, I can move that from left to right, or right to left. You can also add new keyframes as well you can see this little "Insert New Kyframe" button over here, and that will let you insert a keyframe at any point in the timeline we'll have a look at that in a second. By default, it will always create two frames, the first frame at 0 percent and the last frame of the animation at 100 percent, and you can click through those animations just by clicking on either of those. Speaking of the animation timeline, we've got that just sitting right here. However, I don't want to use that one just now, so I'm just going to actually get out of that and jump back in and that's just going to start a brand new animation timeline for me. I can actually load that in if I want to click on that, and that will automatically load in an animation that I've created before. ![]() We've got our saved animations over here, so if you haven't saved any animations at the moment this will be blank but I've already saved one, so that's just sitting under there as a saved animation. The first thing you can see is we've got a place to give our animation a name this is a required field, but you can leave that to last if you don't know what kind of animation you're actually going to create yet. The way you can do that is just by clicking on this button called "Animations" in the header, and clicking on that will give you this brand new interface which allows you to create custom animations, and I'll just take you through that now. However, we've just shipped a brand new feature which allows you to create your own completely custom CSS based timeline animations. These presets come shipped with Bannerify we've got a bunch of entrances and exits you can change these to do different animations really quickly they're just really common presets, so you can use those as much as you want. If you've seen tutorials on this before, or even if you're just new to the Figma plugin, you see pretty quickly that we've got a whole bunch of different animation options here. What it's doing is it's actually loading in all of our frames as banners each of these frames is treated as a banner in Bannerify, and each child layer in those frames is treated as an element inside of the banner. Now we're back in our project, we can right click anywhere, go down to "Plugins" and just click on "Bannerify Banner Studio", and that's going to open up the Figma plugin that we just installed. Pop-up, and if you haven't already installed it, you'll see an "Install" button on the right-hand side you can go ahead and click on that, and once it's installed we can jump back into our project. You'll see a result called "Bannerify Banner Studio" If you haven't already done so, we can go to the top left corner, go to the search bar under Figma Community and just search for "Bannerify". The first thing we need to do is just go to the Figma Community and install the Bannerify Figma plugin. Today, I'm going to be showing you how to add custom keyframe animations to your HTML and GIF/MP4 banners.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |