SVG icon animations

Looking into an old project, I managed to scavenge a couple of SVG animations.
It might be a bit simple, but it shows how a couple of lines can bring to life simple SVG nodes, and adding just some kBs to your site, unlike a gif, video or a sequence of images.

The icons were part of a menu for an advertising platform, so you could choose the type of interaction you wanted for your ad.

At that time I had to put the SVG elements inline to have ids for each node that needed to be manipulated, I need to do some research to know if that can now be achieved by having the SVG in a different file.

The technology used, as shown on the CodePen, is just jQuery and the GSAP (Green Sock Animation Platform).

I updated the old code to be more readable and use some ES6 capabilities, but it is just some basic transformations, that at this moment, might be even achievable with CSS transitions.

 


Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.