Kinetic Typography

Code

body { margin: 0; min-height: 100vh; display: grid; place-content: center; background: #050910; color: #f2f6ff; font-family: "Avenir Next", sans-serif; }
.back { position: fixed; top: 14px; left: 14px; color: #86e8ff; text-decoration: none; }
main { display: grid; gap: 1.1rem; text-align: center; }
.line { margin: 0; font-size: clamp(1.8rem, 5vw, 4.3rem); font-weight: 800; }
.line span { display: inline-block; margin: 0 .3rem; }

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

const reduced = window.MotionPreference.prefersReducedMotion();
if (!reduced && window.gsap) {
  window.gsap.utils.toArray(".line span").forEach((w, i) => {
    window.gsap.fromTo(w, { y: 38, opacity: 0 }, {
      y: 0,
      opacity: 1,
      duration: 0.45,
      delay: i * 0.07,
      ease: "back.out(1.4)"
    });
  });
}

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo 05 - Kinetic Typography</title><link rel="stylesheet" href="style.css" /></head>
<body>
<a class="back" href="../">Back</a>
<main>
  <p class="line"><span>Build</span> <span>bold</span> <span>motion</span></p>
  <p class="line"><span>Design</span> <span>with</span> <span>rhythm</span></p>
  <p class="line"><span>Ship</span> <span>original</span> <span>experiences</span></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="script.js"></script>
    </body></html>

Word-level animated text entrance pattern for energetic headlines.

Source

Repository: libs-gen
Original demo id: 05-kinetic-typography

Notes

Word-level animated text entrance pattern for energetic headlines.