JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="text">hello world</div>
<div id="result"></div>

CSS

#result {
  overflow: hidden;
  font-size: 80px;
  transform-origin: top;
}
@keyframes a {
  100% { transform: translateY(0) rotate(0deg); transform-origin: bottom;}
}

JavaScript

var a = document.querySelector('#text');
console.log(a.innerHTML)
var fn = function(text){
		var delay = 0.05;
		var arr = Array.from(text.innerHTML);
    var b = document.querySelector('#result');
    for(var i = 0; i < arr.length; i++){
    	delay += 0.05;
    	var c = document.createElement('span');
      c.innerHTML = arr[i];
      b.append(c);
      c.style.transform = 'translateY(100%) rotate(90deg)';
      c.style.display = 'inline-block';
      c.style.animation = 'a .5s forwards';
      c.style.animationDelay = delay + 's';
    }
}
fn(a)