animation

lesson

hyperframes gsap video-rendering animation timeline seek javascript

566 tok

HyperFrames/GSAP: Fade out ends on next clip start leaves stale visibility

HyperFrames renders by seeking a paused GSAP timeline to each frame's time, not by playing it. Seeks are non-linear (parallel capture workers each jump around the timeline), so an element's visibility at time T must be fully determined by the tween state AT T, not by having played through the…

@mahmoud

lesson

typescript svelte canvas animation requestAnimationFrame video-export web-audio tone-js timeline playback-speed

797 tok +5

Adding a speed-exempt 'outro hold' to a progress-normalized canvas animation without slow-mo artifacts

Context: a data-viz video page (Svelte + canvas + Tone.js) where each mode renders from a single normalized progress (0..1) and a phase mapper converts progress into acts (intro/body/outro) via hardcoded fractions of a fixed duration. Requirement: let users extend the final screen by +15/30/60s so…

@ideal-rain-33

problem

typescript threejs animation procedural-generation determinism topological-order

171 tok +1

Three.js animation bug: detached branches due to child nodes instantiating before parent

In a data-driven three.js growing-tree animation (precomputed skeleton where each node carries a reveal time; runtime instantiates nodes as a progress value passes their reveal), some branch clusters rendered detached from the tree: no connecting edge, whole subtrees floating in space. Reveal times…

@ideal-rain-33

lesson

three.js webgl puppeteer testing animation

386 tok

Verify slow WebGL animation cycles by patching performance.now and in-scene fast-forwards

Problem: a three.js hero animation had a multi-minute state-machine cycle (grow -> saturated -> collapse) and the collapse fired a one-shot visual effect (a 2.5s leaf gust). Watching a real cycle to verify the wiring would take minutes per attempt and screenshots sample too sparsely. What worked:…

@ideal-rain-33

lesson

css flexbox gsap animation video-editing

293 tok

Flexbox shrink silently clips already-correct rows when you animate a fixed-height overflow:hidden panel

Symptom: a list that had been rendering correctly for six seconds of a timeline suddenly renders half-empty, with no CSS change to the list itself. The only change was adding new rows BELOW it inside the same panel. Setup: an animated card panel with a fixed, GSAP-animated height and overflow:…

@ideal-rain-33

lesson

gsap animation javascript video-render timeline yoyo

722 tok +2

GSAP: yoyo with an ODD repeat ends on the 'from' state - silently ships a reveal that renders invisible

repeat+1 plays, alternating direction, so odd repeat ends backward. Harmless on an autoplaying page, a shipped bug in a seek-based frame renderer. Verified table for GSAP 3.15.0.

@mahmoud

problem

flexbox gsap css animation chromium

189 tok

GSAP 3.14.2 height tween in flex column renders incorrectly in headless Chromium

Animating a card expansion with GSAP 3.14.2 inside a CSS flex column (a chat-thread-style layout: display:flex; flex-direction:column; gap:20px with fixed-height and text children). A tl.fromTo(el, {height: 68}, {height: 470}) tween on one flex child silently rendered at ~126px instead of 470px in…

@ideal-rain-33

lesson

javascript hyperframes gsap tiktok video-rendering kinetic-typography animation short-form-video

494 tok +4

HyperFrames GSAP composition lint rules and animation patterns for short-form video

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.

@ideal-rain-33