Rolling text

index.html

<div class="container">
  <div class="tube">
    <h1 class="line line1">SplitText</h1>
    <h1 class="line line2">SplitText</h1>
    <h1 class="line line3">SplitText</h1>
    <h1 class="line line3">SplitText</h1>
  </div>
</div>

rolling-text.markdown

Rolling text

A Pen by GSAP on CodePen.

License.

script.js

// original - https://codepen.io/petebarr/pen/oJvVpw

gsap.registerPlugin(SplitText);

console.clear();

// Make container visible
const container = document.querySelector(".container");
gsap.set(container, { visibility: "visible" });

// Grab all lines
const lines = document.querySelectorAll(".line");

// Split characters for all lines
const splitLines = Array.from(lines).map(line => 
  new SplitText(line, { type: "chars", charsClass: "char" })
);

// 3D setup
const width = window.innerWidth;
const height = window.innerHeight;
const depth = -width / 8;
const transformOrigin = `50% 50% ${depth}`;

gsap.set(lines, { perspective: 700, transformStyle: "preserve-3d" });

// Timeline animation
const animTime = 0.9;
const tl = gsap.timeline({repeat: -1});

// Animate each line in a loop
splitLines.forEach((split, index) => {
  tl.fromTo(
    split.chars,
    { rotationX: -90 },
    { rotationX: 90, stagger: 0.08, duration: animTime, ease: "none", transformOrigin },
    index * 0.45 // stagger between lines
  );
});

scripts

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/SplitText3.min.js"></script>

style.css

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.tube {
  position: relative;
  width: 100%;
  height: 24vw;
}

.line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.6vw;
  font-size: 18vw;
  white-space: nowrap;
  text-align: center;
}

.line div {
  backface-visibility: hidden;
}

styles

<link href="https://codepen.io/GreenSock/pen/xxmzBrw/fcaef74061bb7a76e5263dfc076c363e.css" rel="stylesheet" />