Adding animations using SVG and pure CSS
Animations have always being a treat to the eye no matter how subtle it seems.
“Animation is not the art of drawings that move but the art of movements that are drawn.” — Norman McLaren
I was aware of different animations done for icons, blurring images on hover, loaders, automatic scrolling text, and many more. But animating SVG’s using CSS was something that I had come across a few weeks back. It was through a YouTube video I was exposed to this art. Will add that as well at the end of the blog. Do check it out. (It's an interesting watch !!)
So let's stop with these lagging intros and why not dive into action !!
Step 1: Take hold of an SVG image. There are various sources out there to extract SVG images, like undraw etc. Feel free to use the service provider of your choice.
Step 2 (Optional): You could use a tool like Figma to remove any unwanted components in the image as well as add a few components as required or even change the color of the components.
For example — adding a few more notes to the board or deleting existing notes.
(Your creativity is the limit !! 🧐)
Step 3 : Analyze the components and decide where you wish to make the changes. Whether you want the boy to run or the girl to jump 😝. Jokes apart decide on the animations you want to make.
Here I had decided to give a small fading to the lines ( 1 ) and show an effect of the boy pasting the notes(2).
Step 4: Finding those parts in the code 🤯.
Follow this link kanban.svg and select the display source tab and perform the following :
(1) Add class=’line’ to the path component with comment as “three lines in top”.
(2) Add id=”hand-boy” to path component with comment as “hand boy” .
(3) Add id=”hand-note-boy” to path component with comment as
“hand-note-boy”.
Follow this link kanban-changed.svg and select the display source tab for the updated SVG with the changes done.
Step 5: Adding those animations 😇.
Step 6: Just see your beautiful animation in action.
As it was rightly said :
“Animation is imagination.” — Dan Weaver, Creative Director, Fudge
So I leave more enhanced and beautiful animations to your imaginations 🤩.
Happy learning! Do give it a clap if you feel this post helped you in any manner.
Here’s the link to the YouTube video:
Also, do connect with me on LinkedIn and follow me on GitHub.
The quotes mentioned in the blog were taken from fudgeAnimation.
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
