SVG Animation Tools: Making Web Animations Simpler

When it comes to building beautiful animated websites, designers and developers know all too well the perils and pitfalls of trying to animate Scalable Vector Graphics.

Working with SVGs in this way can make life incredibly difficult - hand-editing SVG code is time-consuming, with all your hard work overwritten every time the artwork is updated.

To make this whole process quicker and easier, Gareth Battensby, one of our designers here at Parallax, has put together a very handy workflow containing a range of SVG Animation Tools in the form of a python script.

“SVGs are graphics like jpgs or pngs, but they’re text based,” Gareth explained. “Web browsers read the text and turn them into an image. In order to animate SVGs, you need to match references to elements within the text file. So it helps massively if you can name things how you want, rather than what Illustrator decides for you.”

“I built the tools as a response to the frustrations you get when creating complex or long sequence SVG animations,” he continued. “The biggest of these being overwritten edits whenever you re-export from Illustrator. These tools completely eliminate that issue - they’re perfect for front-end developers who animate SVG graphics with GSAP or similar animation libraries.”These time-saving SVG Animation Tools have already been put to good use, helping us to create some exceptionally lovely animations for our award-winning Viva Le Velo website.

For more details and a full tutorial head over to the official GitHub page, and you can download the tools here.