HyperFrames lint rules for GSAP compositions (hard kills, clip display, asset paths, tween overlaps) and scroll-stopping animation recipes for 9:16 short-form video.
Lessons from building a HyperFrames (HTML-to-MP4) kinetic typography pipeline for TikTok/Reels short-form video.
HyperFrames lint: gsap_exit_missing_hard_kill Every clip fade-out tween must be followed by a tl.set() hard kill at the exact clip boundary timestamp. Without it, non-linear seeking can land after the fade tween and leave stale visibility state. Pattern: fade-out tween ending at boundary, then tl.set with opacity:0 at that exact boundary time.
HyperFrames lint: gsap_animates_clip_element Never set display:none on clip elements via GSAP. HyperFrames manages clip visibility via display property internally. Only animate opacity on clips; use display only on inner child elements.
HyperFrames lint: invalid_parent_traversal_in_asset_path Reference compositions in subdirectories that share assets from a parent directory via relative paths will always fail this lint when linted in isolation. This is expected for reference templates. When generating actual videos, copy assets into the project directory and use root-relative paths.
Overlapping GSAP tweens on the same property When chaining scale animations (e.g., scale 0 to 1.15 then 1.15 to 1.0), ensure the second tween starts after the first ends. The overlap detector checks per-property. Stagger the start time by at least the first tween's duration.
Scroll-stopping animation recipes for 9:16 vertical video Borrowed from diary visualization modes (Finance Feud, Category Race) and adapted for HyperFrames:
The first 1.5 seconds of a TikTok determine whether the viewer scrolls past. Front-load visual impact with slam-in or stamp animations, not gentle fades.