animate-wave v1.0.0

Typographic Wave

npm i typographic-wave

import package

Import animationText from typographic-wave

calling animationText function from a package with id container and text to animate

animationText('text', 'hello world');

Place this CSS in a file

.text {
  position: relative;
}
.pTwo {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.pOne span {
  transform-origin: bottom;
}
.pTwo span {
  transform-origin: top;
  color: transparent;
  transform: translateY(100%) rotateX(-90deg);
}
.text:hover .pOne span {
  color: transparent;
  transform: translateY(-100%) rotateX(-90deg);
}
.text:hover .pTwo span {
  color: #000;
  transform: translateY(0%) rotateX(0deg);
}