Frontend Text Banner Animation

Frontend Text Banner Animation developed using HTML, JS and CSS. In the demo you have the options to Change the animation durations.

See the Pen Frontend Community Banner Animation by LawrieCape (@Lawrie) on CodePen.

Created on March 5, 2020 Updated on March 5, 2020. A Pen by LawrieCape on CodePen. License

<div class="container">
  <hgroup>
    <h1 class="featured-text">w3tweaks</h1>
    <h2>.com</h2>
  </hgroup>
</div>

/*
 * Very quick, very rough recreation of the JamHot 'Uncover Edinburgh' effect
 * https://www.thisisjamhot.com/work/uncover-edinburgh
 */

let wrappers, tl;

let config = {
  isDebug: false,
  speed: 10,
  credits: () => {
    window.open(
      "https://www.thisisjamhot.com/work/uncover-edinburgh",
      "_blank"
    );
  }
};

const gui = new dat.GUI();
const speedControl = gui.add(config, "speed", 0.1, 15);
const debugControl = gui.add(config, "isDebug");
gui.add(config, "credits");
speedControl.onChange(function(value) {
  anim(wrappers);
});

debugControl.onChange(function(value) {
  document.body.classList.toggle("debug");
});

function init() {
  const split = Splitting({
    target: ".featured-text",
    by: "chars"
  });

  split.forEach(splitInstance => {
    wrappers = duplicateChars(splitInstance.chars);
    anim(wrappers);
  });
}

function randRange(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function duplicateChars(chars) {
  let wrappers = [];
  chars.forEach(el => {
    const wrapper = document.createElement("span");
    wrapper.setAttribute("class", "char-wrapper");
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);

    let clone = el.cloneNode(true);
    clone.setAttribute("class", "char char--clone");
    wrapper.appendChild(clone);
    wrappers.push(wrapper);
  });

  return wrappers;
}

function anim(letters) {
  if (tl) {
    tl.kill();
  }
  tl = new TimelineMax({
    paused: true,
    onComplete: anim,
    onCompleteParams: [letters]
  });

  letters.forEach((letter, index) => {
    const gotoY = `-${randRange(0, 5) * 2}0vw`;
    const speed = config.speed + Math.random();
    tl.to(
      letter,
      speed,
      {
        y: gotoY,
        ease: "power1.inOut",
        onComplete: () => {
          TweenMax.to(letter, 0, { y: "0" });
        }
      },
      0
    );
  });

  tl.play();
}

init();

Below are the plugins used to animate and splitting the texts. Find the plugins greensock, dat-gui and splitting

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>

@import url('https://fonts.googleapis.com/css?family=Anton&display=swap');

html,
body {
  margin: 0;
  padding: 0;
  background-color: #ff5100;
  overflow: hidden;
}

.debug {
  background-color: hotpink !important;
}
.debug h1 {
  border: 1px solid black;
  overflow: visible;
}
.debug h2 {
  color: red;
  z-index: 2;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 100vw;
  min-height: 100vh;
}

h1,
h2 {
  text-transform: uppercase;
  font-family: "Anton", sans-serif;
  text-align: center;
  margin: 0;
  position: relative;
  overflow: hidden;
}

h1 {
  font-size: 20vw;
  letter-spacing: 1vw;
  margin: 0;
  line-height: 3.1;
  height: 20vw;
}

h2 {
  font-size: 10vw;
  letter-spacing: 4.35vw;
  padding-left: 2.8vw;
}

.char-wrapper {
  position: relative;
  display: inline-block;
}

.char {
  display: inline-block;
  position: relative;
  height: 20vw;
}

.char--clone {
  position: absolute;
  top: 60vw;
  left: 0;
}

.char:before,
.char:after {
  content: attr(data-char);
  position: absolute;
  left: 0;
  height: 20vw;
}

.char:before {
  top: -100%;
}

.char:after {
  bottom: -100%;
}

.dg.a.main {
  margin-right: 0;
}