Add the runtime plumbing needed for the Kinetic intro-animation preset (#460) to work:
-
Role classifier — every intro target gets anima-intro-target--role-title or --role-other at stageTarget() time, based on whether the node matches a heading selector (h1/h2/h3/.wp-block-heading/.wp-block-post-title). Per-role CSS dispatches off this class.
-
Word/line splitter — for Kinetic titles only, split the heading into <span class="line"><span class="word">…</span> …</span> structure with --line-index (global) and --word-index (per-line) set on each word. Line grouping is detected from the browser's layout via offsetTop (splitting.js behavior transplant from louisansa.com), so each visual line gets its own overflow: hidden clip.
-
Safeguards:
- Idempotent (skip if already split — SPA re-entry).
- Skip headings with inline markup (
<em>, <strong>, links) to avoid flattening them.
-
Page-transition compatibility — splitter runs inside stageTarget(), which is called per-target on every initialize(). Barba's anima:page-transition-complete event re-fires initialize on new page content, so fresh titles split correctly after soft navigation.
-
Tests — add test/intro-animations-kinetic.test.js (11 cases: role classifier, DELAY_WINDOW registration, stage-level role tagging, splitter line/word wiring, idempotency, inline-markup skip, and page-transition re-init).
Add the runtime plumbing needed for the Kinetic intro-animation preset (#460) to work:
Role classifier — every intro target gets
anima-intro-target--role-titleor--role-otheratstageTarget()time, based on whether the node matches a heading selector (h1/h2/h3/.wp-block-heading/.wp-block-post-title). Per-role CSS dispatches off this class.Word/line splitter — for Kinetic titles only, split the heading into
<span class="line"><span class="word">…</span> …</span>structure with--line-index(global) and--word-index(per-line) set on each word. Line grouping is detected from the browser's layout viaoffsetTop(splitting.js behavior transplant from louisansa.com), so each visual line gets its ownoverflow: hiddenclip.Safeguards:
<em>,<strong>, links) to avoid flattening them.Page-transition compatibility — splitter runs inside
stageTarget(), which is called per-target on everyinitialize(). Barba'sanima:page-transition-completeevent re-fires initialize on new page content, so fresh titles split correctly after soft navigation.Tests — add
test/intro-animations-kinetic.test.js(11 cases: role classifier, DELAY_WINDOW registration, stage-level role tagging, splitter line/word wiring, idempotency, inline-markup skip, and page-transition re-init).