![]() Draw and animate icons, banners, and motion graphics for web pages and social media sites. Keyshape combines vector graphics drawing and animation tools in a single application. If you have any experience with any timeline-based software (audio/video editing), it’ll come quite naturally.- Download a 14 day trial version at. If you want to learn more about how to animate SVGs with the Keyshape App, I highly recommend checking out Juan at ‘s tutorials. The file size for our 800px X 400px featured image? 156k. Our above animation is 4k, no matter if that image is 20px or 2000px. Social media posts and many other platforms won’t allow you to use SVGs, but on a website, anything goes. Animation > Create > New Selection Handle Animation > Create > New Cluster. Sometimes you have to use GIFs… like the featured image on this post. (Click “rerun” if you don’t see the animation right away.) ![]() ![]() This is the result of that at a mere 4k!!! That’s no movie or GIF, that’s lines being drawn and manipulated right on your screen. Now, using a SWEET program Keyshape App, I can manipulate all the SVG elements using all the wonderful CSS animations possible using keyframes, transforms, opacities, blending, scale, skew… all that good stuff. Here’s a simple example of animating the color of the icon on hover. While SVGs have their own embedded animations ( SMIL), it’s more limiting than CSS animations can offer. Since SVG files are actually code (instructions), they are written in a way that we can manipulate using javascript and CSS when displaying them in a browser. Then move ahead a few frames and change the shape key and repeat. See the Pen Message Center Static by Lars Miller ( on CodePen. To apply key frames to shape keys hover over the number (or eye) at that shape key, right click that and Insert keyframe. It might not seem like much, but when you get into more complex images, the gains can be much greater. File size? The PNG comes in at 2k and the SVG at 1k. See the Pen Message Center Static – PNG by Lars Miller ( on CodePen.Īs a contrast, in this pane, you can see that with SVG, we can increase the size of the image as well as change the color with no loss in quality. When you double a bitmap, what were the instructions for one pixel now become the instructions for 4 pixels (a bigger square) and well… it looks terrible. We can make the image bigger, but with a serious loss in quality. Using the pin tool I will add 3 points here on the first. We cannot access the individual pixels in a PNG, so we cannot change the color. I also want my starting point for the offset animation here at the center of the top horizontal line. What if we want it at a larger size or different color? No, PNG won’t allow us to change any of that. Now, if I were to export this icon as a PNG, it would work… most of the time. Let’s take a look at a mobile phone ringing icon that our designer Dillan created for a recent project. Bitmap vs Vectorīefore I dive into how/why on animation, I feel it’s necessary to show that the difference between bitmaps (PNGs, JPGs, GIFs) and vector files (SVG, AI, EPS) is that bitmaps store what each pixel looks like, while vectors are instructions sent to the browser (or another program) on how to draw that design. I’ll forgo explaining why one might want animations on their page(s). Let’s dive into what they are, how to go about animating SVGs, and the serious advantages in both quality and small file size. Using SVGs on web pages is an old idea that’s becoming newer and better with the rise of CSS animations.
0 Comments
Leave a Reply. |