Skip to content

Kinetic runtime: role classifier + word/line splitter for titles #461

@georgeolaru

Description

@georgeolaru

Add the runtime plumbing needed for the Kinetic intro-animation preset (#460) to work:

  1. 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.

  2. 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.

  3. Safeguards:

    • Idempotent (skip if already split — SPA re-entry).
    • Skip headings with inline markup (<em>, <strong>, links) to avoid flattening them.
  4. 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.

  5. 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions