JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<h4>
  <span class="animation-container">
    <span class="line-animation-text from-top">Branded Events Agency</span>
  </span>
</h4>

<div>
  <span class="animation-container">
    <h3 class="line-animation-text from-right">Branded Events Agency</h3>
  </span>
</div>

<div>
  <span class="animation-container">
    <h2 class="line-animation-text from-left">Branded Events Agency</h2>
  </span>
</div>

<div>
 <span class="animation-container">
    <h1 class="line-animation-text from-bottom">Branded Events Agency</h1>
 </span>
</div>



asdasa

SCSS

h1 {
  font-size:4.4rem;
}
h2 {
  font-size:3.4rem;
}
h3 {
  font-size:2.8rem;
}
h4 {
  font-size:2rem;
}


h1, h2, h3, h4, h5, h6 {
  letter-spacing: -1.5px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.animation-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.line-animation-text {
  display: inline-block;
  transition: all 0.8s cubic-bezier(0.17, 0.46, 0, 1);
  
  &.from-bottom {
    transform: translateY(100%);
  }
  &.from-top {
    transform: translateY(-100%);
  }
  &.from-left {
    transform: translateX(-100%);
  }
  &.from-right {
    transform: translateX(100%);
  }
  
}

.animate .line-animation-text {
  transform: translateY(0px);
}

JavaScript

$(".animation-container").click(function(){
    $("body").toggleClass("animate");
});