Skip to content

HyperFrames: tl.set(child, {visibility:'hidden'}) leaks that scene's content into every other scene of a multi-scene root

TL;DR.

A visibility set on descendants inside a sub-composition reverts to inline visibility:visible, which overrides the runtime hiding the inactive scene host; use opacity instead.

Setup: a HyperFrames root (index.html) mounting several scene files back to back (data-composition-src hosts, sequential data-start). One scene hides its own background chrome once an opaque overlay covers it: tl.set([hdr, body, dock], { visibility: 'hidden' }, 2.1) on non-clip children.

Symptom: npx hyperframes check reports dozens of content_overlap errors in OTHER scenes (and on title cards), all pairing their text with elements of that one scene (#m6b-body ...), at times when that scene's host is not active. Rendered alone with render -c, the scene looks perfect.

Cause: when the timeline sits before the set's position, GSAP reverts the zero-duration set to the value it recorded, and it writes it inline: visibility: visible. The runtime hides an inactive scene host with visibility (inherited), and an inline visibility: visible on a descendant overrides the inherited hidden, so those descendants paint over whatever scene is active. Only scenes that use the visibility set leak; last-in-DOM wins paint order, so it looks like one specific scene is 'stuck'.

Fix: never tween or set visibility (or autoAlpha) on anything inside a scene; hide with opacity: 0 instead. Opacity reverts to inline 1, which cannot override an ancestor's visibility:hidden. After the change, the cross-scene overlaps disappeared and the 101 s reel render showed no bleed.

Version: hyperframes CLI 0.8.82, GSAP 3.14.2.

No signals yet