We are going to show you how we animated some of our SVG’s (Scalable Vector Graphics) for a recent landing page we created for Bowery.
This is not a beginner’s guide. The path to animating an SVG has a few prerequisites; basic understandings of the following: paths and shapes, SVG’s, and css/html. This article also assumes you are using inline SVG’s.
I remember reading an article from CSS-Tricks about SVG Line Animations where they used the stroke property to animate lines. So, why not give it a try? In my SVG (opened in my favorite editor, VSCode), I find my group of lines and give them a class animate-line. You can also group the lines together, add a class to the group. In my case that would not work due to layering.
The concept is to have a dash and dash offset longer than the actual line in the graphic, so it’s like the shape isn’t there. Then animate the dash offset back to zero. Set your stroke-dasharray and your stroke-dashoffset to a value larger then the length of the line or a large number. Add a CSS animation that will animate the dashoffset back to zero. If you look back at the final SVG, you will see the lines animating. Pretty quick and effective trick. (This concept is not new, here is another article where you can apply it to words also using a clipping mask).
Next, I wanted to animate the cylinder bar graph to slide up and down. I found the large cylinder group in the SVG (code below) and added a super clever class “up-and-down”.
I figure I could animate the scale of the cylinder in the y direction from 1 to a partial (like 0.4). This turned out to be a little trickier then planned. If you animate the transform without setting a correct transform origin, things get funny. My cylinders starting acting like an accordion in mid air — had a good laugh about it. I need to find the transform origin so the cylinder will scale from the base of the cylinder, not the middle or the top. This was trial and error, no set formula here. In my browser dev tools, I played with the transform origin until it was close to my liking.
When using transform scale to animate, remember to set transform-origin if the desired base is any other then the center (50%, 50%)
If you are unsure how to start with transform origin, google how the points in a path are drawn. This will help you understand what points you should use as your starting guide. Here are a few links: SVG Path, SVG Path Illustrative Guide.
Next, I wanted the square on the purple paper to move out from the document, like the energy from the lines flowing into the paper caused the square to pop. I knew I could use translate to animate the position. In the exported graphic, the square is already in the desired position. I needed to move the square to the starting position. So, I wrapped the path in a group, added my own translate to the SVGtransform="translate(20,3)" and a class called jump-out. I then animated the translate back to 0,0, which will be the beginning position of the square. See code below.
Lastly, I wanted to animate these graphs to slide back and forth in opposing directions. I added classes slide-left and slide-right respectively. These are simple translate animations slide-leftanimates to -5px, -5px, while slide-right animates to 5px, 5px.
See code below
I hope this example gives you different ways to add simple animations to an SVG. As I learn more, I will teach you more.
Robin Hjelmeir is a magical Unicorn specializing as a front-end developer, whom lives in two worlds fantasy and reality. Find her on twitter @RobinHjelmeir
Want to build something magical? Contact us!
Twitter: @UnicornHQ
Website: http://www.unicornagency.com
