fix: replace GSAP tweens with WAAPI for mobile perf#15
Closed
fedgaltc-code wants to merge 1 commit intoFedG-code:masterfrom
Closed
fix: replace GSAP tweens with WAAPI for mobile perf#15fedgaltc-code wants to merge 1 commit intoFedG-code:masterfrom
fedgaltc-code wants to merge 1 commit intoFedG-code:masterfrom
Conversation
Root cause: Physics2DPlugin ran per-char physics calculations every frame on the JS main thread, and GSAP stagger created N individual child tweens per reform batch. With 6 concurrent batches of ~15 chars each, that's ~360 tweens ticking every frame — the actual mobile bottleneck. Changes: - Scatter: pre-compute parabolic trajectories from same physics equations Physics2DPlugin uses, sample into 4 WAAPI keyframes per char - Color flash: WAAPI animate() instead of gsap.fromTo() - Reform: WAAPI with fill:'backwards' (self-expiring, no cancel needed) - will-change:transform,opacity promotes chars to compositor layers - MAX_ACTIVE_BATCHES raised from 6 to 20 (WAAPI is compositor-driven) Result: ScriptDurationMs reduced 95-97% in heavy scenarios. All perf test thresholds pass (0 flags). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Owner
|
@claude what do you think about this? Isn't this a bit too far removed by getting rid of GSAP completely? |
|
Claude Code is working… I'll analyze this and get back to you. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Improves on PR #14 by finding and fixing the actual mobile performance bottleneck instead of downgrading the visual effect.
Root cause: Physics2DPlugin runs per-char physics calculations every frame on the JS main thread, and GSAP
staggercreates N individual child tweens per reform batch. With 6 concurrent batches of ~15 chars each, GSAP's ticker updates ~360 tweens per frame — this is the core mobile lag.Fix: Replace all per-element GSAP animations with Web Animations API (WAAPI), which runs entirely on the browser's compositor thread — zero per-frame JS cost.
el.animate()instead ofgsap.fromTo()fill:'backwards'(applies first keyframe during stagger delay, self-expires after finishing — nogetAnimations()cancel needed)will-change: transform, opacitypromotes chars to GPU compositor layersMAX_ACTIVE_BATCHESraised from 6→20 (WAAPI is cheap, so fewer impacts are dropped)Results (iPhone 14 emulated, 4x CPU throttle)
0 perf test flags (vs PR #14 needing to raise thresholds to pass).
Test plan
node tests/perf-test-destruction.js— 0 flags, all thresholds pass🤖 Generated with Claude Code