Demo 2

Animating SVG Icons with API

Animating SVG Icons with API

With libraries like Snap.svg the use of SVG assets becomes more easy, and this demo demonstrates how to animate SVG icons.

1

Create SVG icon using an SVG editor or Illustrator. Create groups with ID for each object, for example "pencil", "card", etc.

 
    <g id="pencil">
        <g>
            <rect x="423.8" y="158.1" transform="matrix(-0.6863 0.7273 -0.7273 -0.6863 936.447 111.0321)" fill="#434958" width="41" height="198.8"/>
            <polygon fill="#434958" points="380.8,169.3 352.6,199.2 330.1,149.7"/>
        </g>
    </g>
                

2

We want a special animation to happen. Take a look at API documentation, and find animation you like to use.

3

The idea is to do something with icon. That can be some kind of transformation, like a rotation or a scale, or a change of a path altogether. With the Snap.svg we can dynamically load our SVGs, which we store in a folder, and manipulate them in a very practical way:

 
                    window.onload = function () {

                        // svg objects with IDs
                        var card = Snap.select("#cardOffice"),
                            pencil = card.select("#pencil"),
                            notes = card.select("#notes"),
                            mark = card.select("#mark"),
                            timer;
                            
                        var pivots = [
                            [44, 147],
                            [92, 126]
                        ];

                        // rotation
                        function close() {
                            clearTimeout(timer);

                            pencil.animate({ 
                                transform: "r" + [-20, pivots[0]]
                            }, 500, mina.backin);
                            
                            notes.animate({
                                transform: "t" + [600, pivots[1]]
                            }, 500, mina.backin);

                            timer = setTimeout(function () {
                                mark.animate({
                                    transform: "t280,0r0"
                                }, 200);
                            }, 400);
                        }

                        function open() {
                            clearTimeout(timer);

                            pencil.animate({ 
                                transform: "r" + [0, pivots[0]]
                            }, 700, mina.elastic);
                            
                            notes.animate({
                                transform: "r" + [0, pivots[1]]
                            }, 700, mina.elastic);

                            mark.animate({
                                transform: "t0,0r0"
                            }, 500, mina.elastic);
                        }

                        timer = setTimeout(close, 50);

                        card.hover(open, 
                            function () {
                                timer = setTimeout(close, 200);
                            }
                        );
                    };