Reveal text test

In this example below you will see how to do a Reveal text test with some HTML / CSS and Javascript

This awesome code was written by digistate, you can see more from this user in the personal repository.
You can find the original code on
Copyright digistate ©


  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Reveal text test</title>
    <link rel="stylesheet" href="">

      <link rel="stylesheet" href="css/style.css">



  <h1 class="move-sneak">A new production</h1>
  <script src=''></script>
<script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
body {
  text-align: center;
  padding-top: 5vw;
  background-color: #8A94A7;
  color: #fff;

.move-sneak {
  font-weight: 200;
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
.move-sneak .letter {
  display: inline-block;
  line-height: 1em;
  opacity: 0;

/*Downloaded from */
// Wrap every letter in a span
  $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));

anime.timeline({loop: true})
    targets: '.move-sneak .letter',
    translateX: [40,0],
    translateZ: 0,
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 1200,
    delay: function(el, i) {
      return 500 + 30 * i;
    targets: '.move-sneak .letter',
    translateX: [0,-30],
    opacity: [1,0],
    easing: "easeInExpo",
    duration: 1100,
    delay: function(el, i) {
      return 100 + 30 * i;