iamryanyu

var svgConfig = {
  svg: {
    namespaceClassnames: false
  },
  mode: {
    symbol: {
      dest: '.',
      sprite: 'sprite.svg'
    }
  }

iamryanyu

<script src="js/svgxuse.min.js"></script>
<!--[if IE 9]>
<script src="js/vendor/svg4everybody.js"></script>
<script>svg4everybody();</script>
<![endif]-->

iamryanyu

// reset icon; this is recommended properties
.icon {
  fill: currentColor;
  height: 1em;
  overflow: hidden;
  vertical-align: -.15em;
  width: 1em;
}

// icon size; use font-size

iamryanyu

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290.873 290.873">
  <path fill="currentColor" d="M44.268 139.532V41.05l49.24 49.244"/>
  <path d="M0 73.384L32.334 41.05v32.334"/>
  <path d="M149.583 249.824l-36.075-36.076 36.075-31.905"/>
  <path fill="currentColor" d="M103.066 202.8l-55.85-48.977L160.968 48.77h129.905"/>
</svg>

iamryanyu

// icon color
.icon-red {
  color: #cc0000;
  
  &.icon-inner-blue {
    fill: #cc0000;
  }
}

.icon-inner-blue {

iamryanyu

TweenMax.to($('.graph__bar--red'), 1.2, {
    scaleY: 1.5,
  	transformOrigin: '50% bottom',
    ease: Elastic.easeOut.config(1, 0.2)
  });
  
  TweenMax.to($('.graph__bar--green'), 1.2, {
    scaleY: 0.4,
  	transformOrigin: '50% bottom',
    ease: Elastic.easeOut.config(1, 0.2)

iamryanyu

TweenMax.to($('.graph__bar--red'), 1.2, {
    scaleY: 1.5,
    transformOrigin: '50% bottom',
    ease: Elastic.easeOut.config(1, 0.2)
  });
  
  TweenMax.to($('.graph__bar--green'), 1.2, {
    scaleY: 0.4,
    transformOrigin: '50% bottom',
    ease: Elastic.easeOut.config(1, 0.2)

iamryanyu

TweenMax.to($('.graph__bar--red'), 1.2, {
    scaleY: 1,
    ease: Elastic.easeOut.config(1, 0.2)
  });
  
  TweenMax.to($('.graph__bar--green'), 1.2, {
    scaleY: 1,
    ease: Elastic.easeOut.config(1, 0.2)
  });
  

iamryanyu

TweenMax.to($('.graph__bar--red'), 1.2, {
  scaleY: 1,
  ease: Elastic.easeOut.config(1, 0.2)
});
  
TweenMax.to($('.graph__bar--green'), 1.2, {
  scaleY: 1,
  ease: Elastic.easeOut.config(1, 0.2)
});
  

iamryanyu

var $graphStarRed = $('.graph__star--red'),
    $graphStarGreen = $('.graph__star--green'),
    $graphStarYellow = $('.graph__star--yellow');

// hover over
TweenMax.to($graphStarRed, 1.2, {
  y: -25,
  ease: Elastic.easeOut.config(1, 0.2)
});