Polylion: SVG polygon animation

Using a tad of JavaScript it iterates all <polygon> elements of the SVG and animates them using TimelineMax. It’s also possible without TimelineMax, by using a CSS animation, and by changing animation-delay per <polygon>.

// SCSS
@keyframes polyonlion-animation {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.polyonlion > g polygon {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;
  }
}

@for $i from 1 through $polyonlion-count-face {
  .polyonloaded .polyonlion > g#polyonlion-face polygon:nth-of-type(#{$i}) {
    animation: polyonlion-animation 100ms linear 1 forwards;
    animation-delay: 0.0275s * $i; // 0.0275s * 1, 0.0275s * 2, etc.
  }
}

Polylion →