SVG Animation with CSS
For so long, I admired animated svg’s I decided to animate one myself. Tbh, this was not easy for me but hey, I tried and I’m excited. This is a tutorial on how I went about it. For the end product, here is a link to the code pen.
Requirements
Basic knowledge of CSS animations
A figma account. Click here to create one.
First we’ll need an svg. I used undraw’s illustrations. On undraw.co, click browse now then search. Use the birthday keyword to find the illustration, click on the birthday cake and download svg for your projects.
Open your figma workspace, and create a new file. Drag and drop the downloaded svg on the figma file created.
Note the vectors on the left pane. Try clicking on one to see what it represents on your svg.
This is where it got interesting and challenging at the same time. We have to group the vectors depending on what we want to animate and not. In my case, I animated the flames and balloons(with it’s strings). To group them, you have to select multiple vectors at once:
- Hold Ctrl + shift as you select the various vectors that make up the image.
- After selecting the vectors, group them by hitting Ctrl+G. This will put the images selected, eg balloons, into one group. You could rename the group to a meaningful name(bear in mind the names will be used as id attributes).
I created a group called balloons containing the balloon images and hid them to make sure I selected everything that needs to be in the balloon group.
- Repeat the selecting and grouping until you’re satisfied. Remember grouping and naming is really helpful in animating. If stuck, you could view this video tutorial.
- Once done grouping, you can now change the appearance of your svg. Simply click on the element you want to customize and edit it on the right pane
- If comfortable, you are ready to export your svg. Click on export or the plus sign. Make sure svg is selected and include ‘id’ attributes.
- Then click on export <file-name> ie; export birthday
Open your favorite code editor and let the animation begin 🎉
- Create a folder with two files; html file and css file
- Add the exported svg to the folder
- Open the svg file, copy the code in the file and paste it in the body tag of your html file. View in browser to see if it displays.
- Having linked your CSS file, add some styling and animation. Your svg is grouped as you had grouped in your figma workspace. The group names are the id ‘s of vectors grouped together.
- Here is a gist of how I animated the balloons and flames (html file is a bit long because I inlined my svg code) :
Feel free to play around with the animations. Notice I selected the flames and balloons using the group name which is now an id attribute. I keep on emphasizing on this because, I wanted to animate steps and realized my grouping made it difficult.
I’d really love to see how well you guys get to animate your svg’s.😉Feel free to share your work.
Happy coding and Happy Birthday to all December babies🎉🎉💖.