hyperframes-animation

Build one paused GSAP timeline per scene and register it on window.__timelines keyed by the composition's data-composition-id. Never call tl.play(), use Math.random, or repeat: -1 — the renderer seeks the timeline frame by frame, so all motion must be a pure function of timeline time.

GSAP is the default for about 95% of motion work, covering timelines, transforms, easing, and stagger. Use Lottie for pre-baked After Effects assets, Three.js for 3D scenes, Anime.js for lightweight tweening, CSS for simple decorative loops, WAAPI for native keyframes, and TypeGPU for GPU shader canvases.

Yes, multiple runtimes can coexist in one composition. Each runtime registers its instances on a global such as window.__hfLottie or window.__hfAnime, and HyperFrames seeks all of them in one pass. Lottie instances must use autoplay: false and loop: false.

Desync usually comes from calling getBoundingClientRect() at tween time, using wall-clock APIs like Date.now(), or building timelines inside async callbacks. Compute layout coordinates once at composition setup and drive everything from the paused timeline's time.

Compose 2-4 atomic rules by default since it is faster and produces less code. Load a blueprint only when your scene matches an existing multi-phase template like brand-reveal or social-proof and reusing its phase pipeline saves real authoring time.

Spatial motion must use GSAP transform aliases x, y, scale, and rotation. Non-spatial tweens may also use opacity, color, backgroundColor, and borderRadius. Never tween width, height, top, left, display, or visibility, as these break the deterministic render contract.