JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.7.0/Tween.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js"></script>
<div id="app">
  <div class="type">
    <div class='type-jumper'></div>
    <div class="type-text">
      Follower
    </div>
  </div>
  <div>
    <div class="name">
      <div class='name-jumper'></div>
      <div class="name-text">
        user_name_sub
      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #333;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #333;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.type {
  background: blue;
  box-sizing: border-box;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 13px;
  overflow: hidden;
  width: fit-content;
  position: relative;
  visibility: hidden;
}

.type-text {
  padding: 10px 15px;
}

.name-text {
  padding: 10px 15px;
}


.type-jumper, .name-jumper {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 60px;
  background: white;
}

.name {
  background: red;
  box-sizing: border-box;
  color: white;
  width: fit-content;
  font-weight: bold;
  font-size: 27px;
  overflow: hidden;
  position: relative;
  visibility: hidden;
}

JavaScript

new Vue({
  el: "#app",
  data: {
  },
  mounted() {
    function animate(time) {
      requestAnimationFrame(animate);
      TWEEN.update(time);
  	}
  	requestAnimationFrame(animate);
  
  	animateBack('.type');
    animateText('.type-text');
    animateJumper('.type-jumper');
    
    setTimeout(() => {
    	animateBack('.name');
    	animateText('.name-text');
    	animateJumper('.name-jumper');
    }, 500);
    
    
    setTimeout(() => {
      animateBack('.type', true);
    	animateJumper('.type-jumper', true);
      
      setTimeout(() => {
      	animateBack('.name', true);
    		animateJumper('.name-jumper', true);
      }, 500);
    }, 3500);
  }
})


function animateBack(selector, reverse) {
	var element = document.querySelector(selector);
    var width = element.offsetWidth;
    element.style.width = 0;
    element.style.visibility = 'visible';
    var coords = { width: reverse ? width : 0 };
    var tween = new TWEEN.Tween(coords)
      .to({ width: reverse ? 0 : width }, 700)
      .easing(reverse ? TWEEN.Easing.Quadratic.In : TWEEN.Easing.Quadratic.Out)
      .onUpdate(function(object) {
        element.style.width = coords.width+'px'
      }).onComplete(() => {
      	if (reverse) {
        	element.style.width = undefined;
    			element.style.visibility = 'hidden';
        }
      }).start();
}


function animateText(selector) {
	var text = document.querySelector(selector);
    text.style.transform = 'translate(50px,0)';
    var coords2 = { x: 0 };
    var tween2 = new TWEEN.Tween(coords2)
      .to({ x: 0 }, 700)
      .delay(200)
      .easing(TWEEN.Easing.Quadratic.Out)
      .onUpdate(function(object) {
        text.style.transform = `translate(${coords2.x}px,0)`;
      }).start();
}


function animateJumper(selector, reverse) {
	var element = document.querySelector(selector);
    var width = 60;
    var coords = { width: reverse ? 0 : width };
    var update = () => {
  		element.style.width = coords.width+'px';
  	}
    var tween = new...