Framer Motion is a great animation library, but animating SVGs with it can be a challenge, especially when you have a complex SVG logo. Read on to find out how I did it.
I recently finished coding my personal portfolio site, and whilst it was fun to design and build it from scratch, there were also a lot of challenges I ran into. In particular, I had a logo that I wanted to apply a wavy animation to, but I had to do a lot of digging around and experimenting to find out the best way to do it. Here is the end result:
Pretty sweet huh? Well I think the waves are cool anyway.
This tutorial will cover animating SVGs using the animation API Framer Motion (https://www.framer.com/api/motion/) and React (https://reactjs.org/). I assume you have basic knowledge of how to set these up, otherwise there’s great tutorials for that in the above links!
Ok, now for the bit where you follow along yourself. First, you’ll need an SVG logo made up of several separate shapes. I made the following in Illustrator for demonstration purposes:
Before you export your logo into SVG format however, you’ll need to group together the elements you want to animate. If you want to animate each shape separately you can skip this bit, however if you have several groups this is essential to keep all the elements together. Just using the “group” function in Illustrator isn’t enough, as this doesn’t get reflected in the exported SVG. In order for the separate groups to be preserved, we need to put the groups into separate layers. In Illustrator, this can easily be done by creating the number of layers that you will need, selecting each group in turn, selecting the layer you want to move it to, right clicking the group and choosing arrange → send to current layer. It helps to name the layers something descriptive (see below).
Now our file is set up, we just need to export to SVG format (remember to choose “presentation attributes” and “object IDs as layer names” in the SVG export settings). Drag it into your project. Done? Cool, now it’s time for some code!
First, we need to make an SVG component as a canvas for our logo:
Make sure that the size of the viewbox for the SVG you’ve created in the JSX is the same as the viewbox size of the SVG you’re importing.
Now to import the SVG groups as separate elements, each of which can then be individually animated. I must admit this took me a while to figure out, as each group needs to be extracted from the SVG. The answer here is the SVG “use” element.
This allows us to reference each group we created before using the layer names we made earlier.
Finally, it’s animation time! Let’s create some controls using the useEffect React hook and Framer Motion’s useAnimation module:
Here we give each SVG use element a custom value, and pass it to the “start” method of the controls object. This way we can delay the start of each animation by a few milliseconds. You can have a play around with these values: it took me a while experimenting with different settings until I found something I was happy with. Eventually you should end up with a wavy animation like this:
That’s it! There are lots of other awesome things about Framer Motion too, such as the ability to generate ready-to-animate SVG components on the fly, or have animations respond to scroll. I encourage you to check out the documentation for it at https://www.framer.com/api/motion/
Also, see the final logo I made for my site over at http://philcohn.com
