DrawSVG

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-21
Updated:
2016-11-21
Tags:
animation css JavaScript

DrawSVG and Motion Along a Path

Very simple in GSAP

Codepen :
  TweenMax.staggerFromTo($draw, 4,{ drawSVG:'0' }, { drawSVG: true }, 0.1);
Under the hood it does it with stroke-dasharray and stroke-dashoffset
  • Path or shape has stroke
  • The stroke is dashed (a normal dash, all around the shape (one dash))
  • Ise JS to ​.getTotalLength()​
  • Dasharray the whole length of the shape
  @keyframes dash {
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -274;
  }
}
Result Codepen 

Another GSAP Codepen to demo

You can use percentage or absolute values. or boolean values.