SVG chart animation with GSAP

md.shakil hossain

1470

 <div>

  <h1>Chart One</h1>
  
  <svg class="chartOne"  viewBox="0 0 792 792" version="1.1">
  <defs/>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="SVG-Chart-One" sketch:type="MSLayerGroup">
      <circle id="Oval-1-Copy" fill="#7EAF49" sketch:type="MSShapeGroup" cx="396" cy="396" r="396"/>
      <rect id="chartWindow" stroke="#24370D" stroke-width="3" sketch:type="MSShapeGroup" x="202.572581" y="219" width="386.028226" height="320.244755" rx="7"/>
      <g id="graphLines" transform="translate(247.209677, 382.018648)" stroke="#FFFFFF" stroke-width="15" stroke-linecap="square" sketch:type="MSShapeGroup">
        <path class="graphLine" d="M0.826612903 110.472028L0.826612903 134.88345" id="Line-Copy-8"/>
        <path class="graphLine" d="M41.7439516 88.9568765L41.7439516 134.469697" id="Line-Copy"/>
        <path class="graphLine" d="M83.9012097 91.4393939L83.9012097 134.469697" id="Line-Copy-2"/>
        <path class="graphLine" d="M126.058468 61.6491841L126.058468 134.469697" id="Line-Copy-3"/>
        <path class="graphLine" d="M168.215726 41.7890443L168.215726 134.469697" id="Line-Copy-4"/>
        <path class="graphLine" d="M210.372984 31.8589744L210.372984 134.469697" id="Line-Copy-5"/>
        <path class="graphLine" d="M252.530242 35.1689977L252.530242 134.469697" id="Line-Copy-7"/>
        <path class="graphLine" d="M297.993952 0.413752914L297.993952 134.469697" id="Line-Copy-6"/>
      </g>
      <path class="chartLine" d="M245.556452 379.949883L284.407258 360.089744 323.671371 371.261072 458.409274 329.885781 496.846774 335.264569 546.443548 300.095571" id="chartLine" stroke="#F6F6F6" stroke-width="6" sketch:type="MSShapeGroup"/>
      <g id="sideLines" transform="translate(197.612903, 256.237762)" stroke="#F9F9F9" stroke-width="3" sketch:type="MSShapeGroup">
        <path d="M0 259.423077L12.8125 259.423077" id="Path-11"/>
        <path d="M0 216.392774L12.8125 216.392774" id="Path-11-Copy"/>
        <path d="M0 173.362471L12.8125 173.362471" id="Path-11-Copy-2"/>
        <path d="M0 130.332168L12.8125 130.332168" id="Path-11-Copy-3"/>
        <path d="M0 87.3018648L12.8125 87.3018648" id="Path-11-Copy-4"/>
        <path d="M0 44.2715618L12.8125 44.2715618" id="Path-11-Copy-5"/>
        <path d="M0 1.24125874L12.8125 1.24125874" id="Path-11-Copy-6"/>
      </g>
      <path d="M191 555.794872C191 555.794872 223.237903 547.519814 396 547.519814 568.762097 547.519814 601 555.794872 601 555.794872L601 574 191 574 191 555.794872Z" id="base" fill="#273D0E" sketch:type="MSShapeGroup"/>
    </g>
  </g>
</svg>

  <h1>Chart Two</h1>
<svg class="chartTwo"  viewBox="0 0 792 792" version="1.1">
  <defs/>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="SVG-Chart-Two" sketch:type="MSLayerGroup">
      <circle id="background" fill="#F19898" sketch:type="MSShapeGroup" cx="396" cy="396" r="396"/>
      <rect id="chartWindow" stroke="#24370D" stroke-width="3" sketch:type="MSShapeGroup" x="202.572581" y="219" width="386.028226" height="320.244755" rx="7"/>
      <g id="sideLines" transform="translate(197.612903, 256.237762)" stroke="#F9F9F9" stroke-width="3" sketch:type="MSShapeGroup">
        <path d="M0 259.423077L12.8125 259.423077" id="Path-11"/>
        <path d="M0 216.392774L12.8125 216.392774" id="Path-11-Copy"/>
        <path d="M0 173.362471L12.8125 173.362471" id="Path-11-Copy-2"/>
        <path d="M0 130.332168L12.8125 130.332168" id="Path-11-Copy-3"/>
        <path d="M0 87.3018648L12.8125 87.3018648" id="Path-11-Copy-4"/>
        <path d="M0 44.2715618L12.8125 44.2715618" id="Path-11-Copy-5"/>
        <path d="M0 1.24125874L12.8125 1.24125874" id="Path-11-Copy-6"/>
      </g>
      <path d="M191 555.794872C191 555.794872 223.237903 547.519814 396 547.519814 568.762097 547.519814 601 555.794872 601 555.794872L601 574 191 574 191 555.794872Z" id="base" fill="#273D0E" sketch:type="MSShapeGroup"/>
      <g id="Rects" transform="translate(242.000000, 431.000000)" fill="#F6F6F6" sketch:type="MSShapeGroup">
        <rect class="redChartLine" id="Rect" x="0" y="0" width="35" height="86"/>
        <rect class="redChartLine" id="Rect" x="54" y="0" width="35" height="86"/>
        <rect class="redChartLine" id="Rect" x="108" y="0" width="35" height="86"/>
        <rect class="redChartLine" id="Rect" x="162" y="0" width="35" height="86"/>
        <rect class="redChartLine" id="Rect" x="216" y="0" width="35" height="86"/>
        <rect class="redChartLine" id="Rect" x="273" y="0" width="35" height="86"/>
      </g>
      <path class="redChart" d="M245.5 340L544.5 340" id="chartLine" stroke="#F6F6F6" stroke-width="6" stroke-linecap="square" sketch:type="MSShapeGroup"/>
    </g>
  </g>
</svg>

  <h1>Chart Three on click example</h1>
<svg viewBox="0 0 792 792" version="1.1">
  <defs/>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="SVG-Chart-Three" sketch:type="MSLayerGroup">
      <circle id="Oval-1-Copy-2" fill="#6CA6EB" sketch:type="MSShapeGroup" cx="396" cy="396" r="396"/>
      <rect id="chartWindow" stroke="#24370D" stroke-width="3" sketch:type="MSShapeGroup" x="202.572581" y="219" width="386.028226" height="320.244755" rx="7"/>
      <g id="sideLines" transform="translate(197.612903, 256.237762)" stroke="#F9F9F9" stroke-width="3" sketch:type="MSShapeGroup">
        <path d="M0 259.423077L12.8125 259.423077" id="Path-11"/>
        <path d="M0 216.392774L12.8125 216.392774" id="Path-11-Copy"/>
        <path d="M0 173.362471L12.8125 173.362471" id="Path-11-Copy-2"/>
        <path d="M0 130.332168L12.8125 130.332168" id="Path-11-Copy-3"/>
        <path d="M0 87.3018648L12.8125 87.3018648" id="Path-11-Copy-4"/>
        <path d="M0 44.2715618L12.8125 44.2715618" id="Path-11-Copy-5"/>
        <path d="M0 1.24125874L12.8125 1.24125874" id="Path-11-Copy-6"/>
      </g>
      <path d="M191 555.794872C191 555.794872 223.237903 547.519814 396 547.519814 568.762097 547.519814 601 555.794872 601 555.794872L601 574 191 574 191 555.794872Z" id="base" fill="#273D0E" sketch:type="MSShapeGroup"/>
      <path class="blueChartLine" d="M236 502.5L547.5 265.5" id="chartLine" stroke="#F1F1F1" stroke-width="6" sketch:type="MSShapeGroup"/>
      <path class="triangle" d="M239.5 522.5L561 521 562 274.5 239.5 522.5Z" id="triangleChart" fill="#F4F4F4" sketch:type="MSShapeGroup"/>
    </g>
  </g>
</svg>
  
  <button onclick="blueAni(),blueAniTriangle();">Animate</button>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Try it Yourself >>

 svg{
  width:30%;
  display:block;
  margin:0 auto;
  margin-top:1%;
  margin-bottom:19%;
}

div{
  margin:0 auto;
  display:block; 
  width:60%;
} 

h1{
  font-family:"Avenir", Monospace;
  font-size:1.5em;
  font-weight:normal;
  text-align:center;
}

.triangle{
  stroke:#6299DB;
  stroke-width:6;
}

.blueChartLine{
  stroke:#FAFAFA;
}

button{
  background:#6CA6EB;
  border:none;
  color:white;
  font-family:"Avenir", Monospace;
  text-transform:uppercase;
  font-size:0.9em;
  padding:1% 2% 1% 2%;
  text-align:center;
  display:block;
  margin:0 auto;
  margin-top:-10%;
  margin-bottom:5%;
}

Try it Yourself >>

//

var tl = new TimelineMax();

tl.staggerFrom(".graphLine", 1, { opacity:0, y:20, ease: Elastic.easeOut.config(1.5,0.5) }, 0.15)
.from(".chartLine", 0.2, { opacity:0, });

tl.repeat(-1).yoyo(false).repeatDelay(1).play();


//

var tlRed = new TimelineMax();

tlRed.staggerFrom(".redChartLine", 1.3, { opacity:0, y:-80, ease: Elastic.easeOut.config(1.5,0.5) }, 0.15)
.from(".redChart", 0.8, { rotation:860, transformOrigin:"50% 50%", opacity:0, scale:0.2 });

tlRed.repeat(-1).yoyo(false).repeatDelay(1).play();

//

//

var blueAni = function(){

var path = document.querySelector('.blueChartLine');
var length = path.getTotalLength();

path.style.transition = path.style.WebkitTransition =
  'none';

path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;

path.getBoundingClientRect();

path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';

path.style.strokeDashoffset = '0';
};

//

var blueAniTriangle = function(){

var pathTwo = document.querySelector('.triangle');
var lengthTwo = pathTwo.getTotalLength();

pathTwo.style.transition = pathTwo.style.WebkitTransition =
  'none';

pathTwo.style.strokeDasharray = lengthTwo + ' ' + lengthTwo;
pathTwo.style.strokeDashoffset = lengthTwo;

pathTwo.getBoundingClientRect();

pathTwo.style.transition = pathTwo.style.WebkitTransition =
  'stroke-dashoffset 2s ease-in-out';

pathTwo.style.strokeDashoffset = '0';
};

Try it Yourself >>