Gold Animation (mo.js + anime.js)

gold-animation-mo-js-anime-js.markdown

Gold Animation (mo.js + anime.js)

Interaction design + animation fun with with Anime, Mo.js, and Tilt.js.

A Pen by Matt Rothenberg on CodePen.

License.

index.html

<div class="player-controls">
  <button class="btn btn-small" id="btnReplay">
   <i class="material-icons">replay</i>
  </button>
</div>
<main class="flex items-center justify-center">
 <div class="svg-wrap">
   <svg id="au-element" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 508.6 508.6">
   <defs>
     <linearGradient id="goldGradient">
       <stop offset="0%"  stop-color="#F5C21B"/>
       <stop offset="100%" stop-color="#D17000"/>
     </linearGradient>
   </defs>
   <path class="element-border" d="M10,498.7V10h488.7v488.7H10z"/>
    <path class="element-name" d="M201.9,150.74,278,354.21H231.53L216.14,308.9H140.06l-16,45.31h-45L156,150.74Zm2.56,124.82L178.81,200.9h-.57l-26.5,74.66Z"/>
   <path class="element-name" d="M391.12,354.21V333.69h-.85q-7.69,12.82-19.95,18.52a58.91,58.91,0,0,1-25.08,5.7q-16.24,0-26.64-4.27a38.41,38.41,0,0,1-16.39-12.11,47.35,47.35,0,0,1-8.41-19.09,118.63,118.63,0,0,1-2.42-24.94V206.88h40.47v83.21q0,18.24,5.7,27.21t20.23,9q16.52,0,23.94-9.83t7.41-32.34V206.88h40.47V354.21Z"/>
  </svg>
 </div>
</main>

script.js

var body = $('body');
var svgWrap = $('.svg-wrap');
var btnReplay = $('#btnReplay');
var starburst, tilt, lineMaker;
var animationTimeline = anime.timeline({
 begin: function() {
  buildLinemaker();
  lineMaker.animateLinesIn();
 },
 complete: animateBody
});

function buildStarburst() {
 starburst = new mojs.Burst({
  radius: { 0: 400 },
  count: 35,
  children: {
    shape: 'circle',
    points: 5,
    fill: { '#F5C21B' : '#D17000' },
    angle: { 360: 0 },
    radius: 10,
    duration: 1000,
    delay: 'stagger( rand(0, 100) )'
  }
 });
}

function buildLinemaker() {
 lineMaker = new LineMaker({
				position: 'fixed',
				lines: [
					{top: '15%', left: 0, width: '100%', height: 2, color: '#ddd', hidden: true},
					{top: '85%', left: 0, width: '100%', height: 2, color: '#ddd', hidden: true},
					{top: 0, left: '90%', width: 2, height: '100%', color: '#ddd', hidden: true},
					{top: 0, left: '10%', width: 2, height: '100%', color: '#ddd', hidden: true},
					{top: '15%', left: 0, width: '100%', height: 2, color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 0, direction: 'LeftRight' }},
					{top: '85%', left: 0, width: '100%', height: 2, color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 100, direction: 'RightLeft' }},
					{top: 0, left: '90%', width: 2, height: '100%', color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 200, direction: 'BottomTop' }},
					{top: 0, left: '10%', width: 2, height: '100%', color: '#000', hidden: true, animation: { duration: 1000, easing: 'easeInOutExpo', delay: 300, direction: 'TopBottom' }}
				]
 });
}

function animateBody() {
 body.addClass('animation-complete');
 buildStarburst();
 starburst.replay();
 enableTilt();
}

animationTimeline
 .add({
  targets: '.element-border',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  opacity: 1,
  duration: 1400,
  direction: 'alternate',
 })
 .add({
  duration: 800,
  targets: '#au-element .element-name',
  easing: 'easeInOutCubic',
  scale: .7,
  opacity: 1,
  translateY: -50
 });

btnReplay.on('click', function() {
 tilt.tilt.destroy.call(tilt);
 lineMaker.removeLines();
 starburst.el.remove();
 body.removeClass('animation-complete');
 animationTimeline.restart();
});

function enableTilt() {
 tilt = svgWrap.tilt({
  glare: true,
  scale: 1.05,
  maxGlare: .15
 });
}

scripts

<script src="https://unpkg.com/[email protected]/dest/tilt.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/codrops/LineMaker/47fb4e4b/js/main.js"></script>
<script src="https://codepen.io/juliangarnier/pen/yMLaRG"></script>
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>

style.scss

$svg-size: 325px;
$gold-light: #F5C21B;
$gold-dark: #D17000;

body {
 height: 100vh;
 overflow: hidden;
 position: relative;
 transition: all .2s ease-out;
}

body.animation-complete {
 background: #222;
 
 .decolines .decoline {
  background: $gold-light !important;
 }
 
 .player-controls .btn {
  color: $gold-light;
 }
 
 .svg-wrap {
  fill: #222;
  box-shadow: 0 35px 50px 0px rgba(0, 0, 0, .20);
 }
 
 .element-border {
  fill: #222;
  stroke: url(#goldGradient);
 }
 
 .element-name {
  fill: #F5C21B;
 }
}

.player-controls {
 position: absolute;
 margin: 15px;
 right: 0;
 top: 0;
 width: auto;
}

main {
 height: 100vh;
}

.svg-wrap {
 background: transparent;
 height: $svg-size;
 width: $svg-size;
 transition: box-shadow .2s ease-out;
 transform-style: preserve-3d;
 z-index: 999;
}

svg {
 height: $svg-size;
 width: $svg-size;
 transform-style: preserve-3d;
}

.element-border {
 opacity: 0;
 fill: none;
 stroke: #000;
 stroke-width: 20px;
 stroke-linecap: square;
 transition: fill .2s ease-out;
}

.element-name {
 opacity: 0;
}

[data-name="mojs-shape"] {
  z-index: 99;
}

.decolines .decoline {
 opacity: .15 !important;
}

styles

<link href="https://cdn.rawgit.com/codrops/LineMaker/master/css/decolines.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/css/ace.css" rel="stylesheet" />