Safari Animations

by dhwanilshah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<div>

  <button onclick="play()">
Animate
</button>
  <button onclick="pause()">
Pause
</button>
<input type="range" value="0" id="seeker" max="5" min="0" step="1000" oninput="dragHandler()"/>

<div>
  <span id="animate-text-1">Portfolio Summary</span>
  <span id="animate-text-2">Portfolio Summary</span>
</div>

</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>

CSS

#animate-text-1 {
  font-size: 45px;
  margin: 100px 100px;
  font-weight: 900;
  font-size: 3.5em;
}

#animate-text-2 {
  font-size: 45px;
  margin: 100px 100px;
  font-weight: 900;
  font-size: 3.5em;
}

.animate-text .letter {
  display: inline-block;
  line-height: 1em;
}

JavaScript

let t;

function dragHandler () {
	let value = document.getElementById('seeker').value;
  console.log('Value - ', value);
    console.log('Duration - ', t.duration);
  console.log('Delay - ', t.delay);
  t.seek(value);
}

var array = [];
function animator() {
  t = anime.timeline({
  easing: 'easeOutExpo',
  duration: 5000
	});
	let anim = rollOut('#animate-text-2', 1000);
  t.add(anim);
  anim = rollOut('#animate-text-1', 1000);
  t.add(anim, '-=2500');
  t.pause()
  console.log('Max', Math.round(t.duration));
  document.getElementById('seeker').max = Math.round(t.duration);
}

function play (){
	t.play();
}

function pause () {
	t.pause();
}


function rollOut (elementID, delay) {
	$(elementID).each(function(){
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
  });
  let elements = $(elementID + ' .letter');
  console.log('Elements', elements.length);
  let duration = 5000;
  console.log('Duration', duration);
  let delayTime = duration / elements.length;
  return {
    targets: elementID + ' .letter',
    scale: [7,1],
    opacity: [0,1],
    translateX: [100, 0],
    easing: "easeOutExpo",
    duration: duration,
    delay: function(el, i) {
      return delayTime*i;
    }
  }
}

animator();