Typically frontend developer relationship with image animation

Bad quality of image

Resize problems

SVG? WTF?

Why SVG Animation?

• Lightweight
• Fast
• Scalable
• Lots of online tutorials
• Interactivity
• Supported on all major browsers (except IE8 and less)

SVG Paths

There is one overpowered element in SVG, that would be the element < path >

The element takes this sequence of drawing commands through the attribute d.

Other useful commands

• arcs (A)
• quadratic bezier curves (Q)
• cubic bezier curves (C)
• etc

"Okay, I get it. SVG is powerful, but how do I animate it?"

SVG animation

1. CSS

2. Native

3. JS

CSS animation

stroke-dasharray & stroke-dashoffset

Just curve line

Add animation

  .path {
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    animation: dash 5s linear;
  }
  @keyframes dash {
    from {
      stroke-dashoffset: 320;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
                        

With more paths

And more styles

    .line1 {
      stroke-dasharray: 340;
      stroke-dashoffset: 40;
      animation: dash 2.5s linear alternate infinite;
    }

    .line2 {
      stroke-dasharray: 320;
      stroke-dashoffset: 320;
      animation: dash2 2.5s linear alternate infinite;
    }
                        

And main - with more animations

    @keyframes dash {
        from {
          stroke-dashoffset: 360;
        }
        to {
          stroke-dashoffset: 40;
        }
    }
    @keyframes dash2 {
        from {
          stroke-dashoffset: 280;
        }
        to {
          stroke-dashoffset: -40;
        }
    }
                        

Result

Example

Native animation

Animation is done by manipulating the attributes of shapes over time. This is done using one or more of the 4 SVG animation elements.

Elements

Animation is achieved by nesting one or more of the following elements inside the element that needs animation.

• set
• animate
• animateMotion
• animateTransform

Animate

Animates an attribute

animateMotion

Animates motion along a path.

animateTransform

Animates the transform attribute of a shape.

animateTransform

AnimatesTransform type="scale".

Combine animations

Synchronize beginning of one animation to end of another

JS animation

JS Libraries

Fine tune the interactivity

• Snap.svg
• GSAP
• Velocity.js
• Svg.js
• Raphael.js

Cool animation with GSAP library

How to get from this