CSSとGSAPで作る、スクロールで文字が散らばるテキストアニメーション

import {
	gsap
} from "https://esm.sh/gsap@3.12.5";
import {
	ScrollTrigger
} from "https://esm.sh/gsap@3.12.5/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
const DEFAULTS = {
	windAngle: 25,
	windStrength: 400,
	scatter: 80,
	maxRotation: 360,
	stagger: 0.5,
	depth: 120,
	reverse: false,
	order: "random",
	randomness: 0,
	gustiness: 0,
	gustFrequency: 1,
	gustPhaseSpread: 1,
	startY: null,
	animationDuration: 1,
	easing: null,
};

function sfc32(a, b, c, d) {
	return function() {
		a |= 0;
		b |= 0;
		c |= 0;
		d |= 0;
		const t = (a + b | 0) + d | 0;
		d = d + 1 | 0;
		a = b ^ (b >>> 9);
		b = c + (c << 3) | 0;
		c = (c << 21) | (c >>> 11);
		c = c + t | 0;
		return (t >>> 0) / 4294967296;
	};
}

function seededRandom(seed) {
	let s = seed >>> 0;
	const splitmix32 = () => {
		s = (s + 0x9e3779b9) | 0;
		let t = s ^ (s >>> 16);
		t = Math.imul(t, 0x21f0aaad);
		t = t ^ (t >>> 15);
		t = Math.imul(t, 0x735a2d97);
		return (t ^ (t >>> 15)) >>> 0;
	};
	const rand = sfc32(splitmix32(), splitmix32(), splitmix32(), splitmix32());
	for (let i = 0; i < 12; i++) rand();
	return rand;
}
const seed = 42;
let r = seededRandom(seed);
const rand = (min, max) => min + r() * (max - min);
const clamp01 = (v) => Math.max(0, Math.min(1, v));
const lerp = (a, b, t) => a + (b - a) * t;

function buildStructure(el, text) {
	if (getComputedStyle(el).position === "static") el.style.position = "relative";
	el.textContent = "";
	const srEl = document.createElement("span");
	srEl.className = "kumonosu-visually-hidden";
	srEl.textContent = text;
	el.appendChild(srEl);
	const placeholder = document.createElement("span");
	placeholder.setAttribute("aria-hidden", "true");
	placeholder.style.cssText = "visibility:hidden; pointer-events:none; user-select:none;";
	placeholder.textContent = text;
	el.appendChild(placeholder);
	const overlay = document.createElement("span");
	overlay.setAttribute("aria-hidden", "true");
	overlay.style.cssText = "position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; pointer-events:none;";
	el.appendChild(overlay);
	return {
		placeholder,
		overlay
	};
}

function measureAndCreateChars(el, raw, placeholder, overlay) {
	const containerRect = el.getBoundingClientRect();
	const textNode = placeholder.firstChild;
	const chars = [];
	for (let i = 0; i < raw.length; i++) {
		if (raw[i] === " " || raw[i] === "　") continue;
		const range = document.createRange();
		range.setStart(textNode, i);
		range.setEnd(textNode, i + 1);
		const rRect = range.getBoundingClientRect();
		const span = document.createElement("span");
		span.textContent = raw[i];
		span.classList.add("kumonosu-fly-char");
		span.style.cssText = `position:absolute; left:${rRect.left - containerRect.left}px; top:${rRect.top - containerRect.top}px; width:${rRect.width}px; height:${rRect.height}px; white-space:nowrap;`;
		span._x = rRect.left - containerRect.left;
		overlay.appendChild(span);
		chars.push(span);
	}
	const xs = chars.map((c) => c._x);
	const xMin = Math.min(...xs);
	const xRange = Math.max(...xs) - xMin || 1;
	chars.forEach((c) => {
		c._normX = (c._x - xMin) / xRange;
	});
	return chars;
}

function charStartTime(char, total, order, stagger, randomness = 0) {
	if (total <= 1) return 0;
	const x = char._normX;
	let ordered;
	switch (order) {
		case "ltr":
			ordered = x * stagger;
			break;
		case "rtl":
			ordered = (1 - x) * stagger;
			break;
		case "outward":
			ordered = (1 - Math.abs(x - 0.5) * 2) * stagger;
			break;
		default:
			return rand(0, stagger);
	}
	return ordered * (1 - randomness) + rand(0, stagger) * randomness;
}

function buildTimeline(el, chars, p) {
	const {
		reverse,
		windAngle,
		windStrength,
		scatter,
		maxRotation,
		depth,
		order,
		stagger,
		randomness,
		gustiness,
		gustFrequency,
		gustPhaseSpread,
		easing
	} = p;
	const tl = gsap.timeline({
		paused: true
	});
	if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
		tl.fromTo(el, {
			opacity: reverse ? 0 : 1
		}, {
			opacity: reverse ? 1 : 0,
			duration: 1
		});
		return tl;
	}
	const rad = (windAngle * Math.PI) / 180;
	const windX = Math.cos(rad);
	const windY = -Math.sin(rad);
	const perpX = Math.sin(rad);
	const perpY = Math.cos(rad);
	const sharedAmp = gustiness > 0 ? rand(0.1, 1.0) * gustiness * (r() > 0.5 ? 1 : -1) : 0;
	chars.forEach((char, i) => {
		const startTime = charStartTime(char, chars.length, order, stagger, randomness);
		const duration = rand(1 - randomness * 0.5, 1 + randomness * 0.5);
		const scatterAngle = rand(0, Math.PI * 2);
		const scatterDist = rand(0, scatter);
		const syncPhase = Math.PI * gustFrequency * startTime;
		const indexPhase = (i / Math.max(1, chars.length - 1)) * Math.PI * 2;
		const phase = lerp(syncPhase, indexPhase, gustPhaseSpread);
		const fx = windX * windStrength + Math.cos(scatterAngle) * scatterDist;
		const fy = windY * windStrength + Math.sin(scatterAngle) * scatterDist;
		const fz = rand(-depth, depth);
		const rx = rand(-maxRotation, maxRotation);
		const ry = rand(-maxRotation * 0.7, maxRotation * 0.7);
		const rz = rand(-maxRotation * 0.3, maxRotation * 0.3);
		if (gustiness > 0) {
			const individualAmp = rand(0.1, 1.0) * gustiness * (r() > 0.5 ? 1 : -1);
			const amp = lerp(sharedAmp, individualAmp, gustPhaseSpread);
			const s0 = Math.sin(phase);
			const s1 = Math.sin(Math.PI * gustFrequency + phase);
			const gustSine = (t) => amp * (Math.sin(Math.PI * gustFrequency * t + phase) - s0 - t * (s1 - s0));
			const sineAt = (t) => {
				const s = reverse ? 1 - t : t;
				return {
					x: s * fx + perpX * gustSine(t),
					y: s * fy + perpY * gustSine(t),
					z: s * fz,
					rotationX: rx * s,
					rotationY: ry * s,
					rotationZ: rz * s,
					opacity: clamp01((1 - s) / 0.6)
				};
			};
			gsap.set(char, sineAt(0));
			const proxy = {
				t: 0
			};
			tl.to(proxy, {
				t: 1,
				duration,
				ease: easing || "power3.in",
				onUpdate() {
					gsap.set(char, sineAt(proxy.t));
				}
			}, startTime);
		} else {
			const from = reverse ? {
				x: fx,
				y: fy,
				z: fz,
				rotationX: rx,
				rotationY: ry,
				rotationZ: rz,
				opacity: 0
			} : {
				x: 0,
				y: 0,
				z: 0,
				rotationX: 0,
				rotationY: 0,
				rotationZ: 0,
				opacity: 1
			};
			const to = reverse ? {
				x: 0,
				y: 0,
				z: 0,
				rotationX: 0,
				rotationY: 0,
				rotationZ: 0,
				opacity: 1
			} : {
				x: fx,
				y: fy,
				z: fz,
				rotationX: rx,
				rotationY: ry,
				rotationZ: rz,
				opacity: 0
			};
			tl.fromTo(char, from, {
				...to,
				duration,
				ease: easing ?? (reverse ? "power3.out" : "power3.in")
			}, startTime);
		}
	});
	const animDuration = parseFloat(p.animationDuration);
	if (animDuration > 0 && animDuration < 1) tl.call(() => {}, [], tl.duration() / animDuration);
	return tl;
}

function initFlyText(el) {
	const d = el.dataset;
	const p = {
		...DEFAULTS
	};
	for (const key in d) {
		if (d[key] === "true") p[key] = true;
		else if (d[key] === "false") p[key] = false;
		else if (!isNaN(d[key]) && d[key].trim() !== "") p[key] = parseFloat(d[key]);
		else p[key] = d[key];
	}
	const raw = el.textContent.replace(/\s+/g, " ").trim();
	const {
		placeholder,
		overlay
	} = buildStructure(el, raw);
	let st = null,
		tl = null;

	function setup() {
		if (st) st.kill();
		if (tl) tl.kill();
		overlay.innerHTML = "";
		const chars = measureAndCreateChars(el, raw, placeholder, overlay);
		if (!chars.length) return;
		gsap.set(chars, {
			transformPerspective: 500
		});
		tl = buildTimeline(el, chars, p);
		const startPct = Math.round((p.startY ?? (p.reverse ? 0.85 : 0.65)) * 100);
		st = ScrollTrigger.create({
			trigger: el,
			start: `top ${startPct}%`,
			end: p.reverse ? "top 20%" : "bottom top",
			scrub: 1,
			animation: tl
		});
	}
	setup();
	let resizeTimer;
	new ResizeObserver(() => {
		r = seededRandom(seed);
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(setup, 200);
	}).observe(el);
}
document.fonts.ready.then(() => {
	document.querySelectorAll(".kumonosu-fly-text").forEach(initFlyText);
});