Rolling text

미리보기 안의 버튼·입력·포인터로 모션을 확인하세요. 실행 방식은 아래 활용 메모를 참고하세요.

<!doctype html>
<!-- Source: https://codepen.io/GreenSock/pen/dPMjJWv; archived original panels separately. Runtime: official GSAP 3.15.0. -->
<html lang="en" class=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Rolling text</title>

<link rel="stylesheet" href="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/xxmzBrw.css">
<style>
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;
}
</style></head><body>
<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>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-gsap.min.js"></script>
<script src="https://asset.wemashup.com/wp-content/uploads/wm-asset-library/gsap/shared/gsap-3.15.0-SplitText.min.js"></script>
<script>
// 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
  );
});

</script></body></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>

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;
}

// 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
  );
});