NSB Logo Prototype

Using GSAP TweenMax

by bejnar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<a id="play" href="javascript:void(0);">Play</a>
<a id="pause" href="javascript:void(0);">Pause</a>

<div class="nsb-slide-2">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
    <defs>
      <style>
        .bg {
          fill: #ececed;
        }
        
        .a {
          fill: url(#a);
        }
        
        .b {
          fill: url(#b);
        }
        
        .c {
          fill: url(#c);
        }
        
        .d {
          fill: url(#d);
        }
        
        .e {
          fill: url(#e);
        }
        
        .f {
          fill: url(#f);
        }

      </style>

    <clipPath id="nsb-mask">
      <circle cx="150" cy="150" r="150"></circle>
    </clipPath>
      

      <linearGradient id="a" data-name="gray" x1="10.07" y1="202.5" x2="285.85" y2="181.76" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#bbbcbd" />
        <stop offset="1" stop-color="#ececed" />
      </linearGradient>

      <linearGradient id="b" data-name="yellow1" x1="0" y1="100" x2="300" y2="100" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#ffde10" />
        <stop offset="1" stop-color="#fff1a5" />
      </linearGradient>

      <linearGradient id="c" data-name="yellow2" x1="54.42" y1="146.29" x2="243.41" y2="146.29" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#f5a26b" />
        <stop offset="1" stop-color="#ffde10" />
      </linearGradient>
      
      <linearGradient id="d" data-name="Verlauf: Rot" x1="72.26" y1="187.16" x2="284.26" y2="187.16" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#ed6c84" />
        <stop offset="1" stop-color="#f5a26b" />
      </linearGradient>

      <linearGradient id="e" data-name="Verlauf:...

CSS

.nsb-slide-2 {
  height: 300px;
  width: 300px;
  display: relative;
  overflow: hidden;
}

#template, #path {
  fill: none;
}
#template {
  stroke-width: 20px;
  stroke: #444;
}
#path {
  stroke: #88CE02;
  stroke-width: 20px;
  visibility: hidden;
}

JavaScript

var $a = $('.a'),
    $b = $('.b'),
    $c = $('.c'),
    $d = $('.d'),
    $e = $('.e'),
    $f = $('.f'),
    tl;

var play = document.getElementById("play"),
    pause = document.getElementById("pause");

var tl = new TimelineMax({
  delay: 0.5,
  repeat: -1,
  repeatDelay: 0,
  onComplete: restart
});

//set the initial value
TweenLite.set("#path", {visibility:"visible"});
TweenLite.set("#code", {visibility:"visible"});

// .to( target:Object, duration:Number, vars:Object, position:Number ) 
tl.to("#path", 2, {
	drawSVG:'10%', 
  ease:Power1.easeInOut
  })
  .to("#path", 2, {
	drawSVG:'60%', 
  ease:Power1.easeInOut
  })
	.to($a, 1, {
    x: '200%',
    ease: Power0.easeNone
  }, 0)
  .to($b, 1, {
    x: '200%',
    ease: Power0.easeNone
  })
  .to($c, 1, {
    x: '200%',
    ease: Power0.easeNone
  })
  .to($d, 1, {
    x: '200%',
    ease: Power0.easeNone
  })
  .to($e, 1, {
    x: '200%',
    ease: Power0.easeNone
  })
  .to($f, 1, {
    x: '200%',
    ease: Power0.easeNone
  })
  .to($f, 0, {
    x: '100%',
    y: '-300',
    //directionalRotation:"54_cw",    
  })
  .to($f, 4, {
    x: '100%',
    y: '100%',
    ease: Power1.easeOut,
    physics2D:{
    	velocity: 300, 
      angle: -60
    }
  });

function reset() {
  reps = 0;
}

function restart() {
  TweenLite.to(restart, 0, {
    autoAlpha: 0
  })
}

play.onclick = function() {
  tl.play();
}

pause.onclick = function() {
  tl.pause();
}

reset();