skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize-web-animations

Profile and pause offscreen CSS animations, canvas loops, and memory leaks on frontend pages.

5.7k|685|Updated Feb 3, 2026
Search Tags:#memory leak#intersectionobserver#animation optimization#requestAnimationFrame#frontend profiling#webGL#Web performance
One-click install
npx skills add https://github.com/MengTo/Skills --skill optimize-web-animations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize-web-animations
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/codex/optimize-web-animations
Command: npx skills add https://github.com/MengTo/Skills --skill optimize-web-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Frontend pages with heavy animation work often keep running CSS animations, requestAnimationFrame loops, and WebGL renderers even when offscreen, causing janky scrolling, high CPU/GPU usage, memory leaks, and long-session slowdowns that are hard to diagnose without live measurement.

Core Features & Use Cases

  • Browser-Based Profiling: Captures baseline measurements at top, mid, footer, and mobile viewports using Codex Browser, counting running offscreen animations by name and inspecting canvas/WebGL elements separately.
  • Targeted Optimization Patches: Adds IntersectionObserver-based visibility gating, pauses CSS animations with animation-play-state, and cancels/resumes RAF loops for canvas, WebGL, GSAP, and physics effects.
  • Memory Leak Hardening: Audits and fixes cleanup for timers, listeners, observers, Three.js resources, GSAP tweens, media streams, and async loaders that resolve after unmount.
  • Use Case: A React/Vite marketing page slows the computer over time; use this Skill to profile the route, pause offscreen marquee and skeleton animations, dispose WebGL resources on unmount, and verify offscreenRunningCount: 0 across all sampled viewports.

Quick Start

Use $optimize-web-animations to profile my localhost landing page for offscreen animations and memory leaks, then patch the worst offenders and verify the results.

Frequently Asked Questions about optimize-web-animations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I pause CSS animations when they scroll offscreen?▼

Add an IntersectionObserver that toggles a class like is-offscreen on sections and animated elements, then apply animation-play-state: paused via targeted CSS rules. Include ::before and ::after selectors for pseudo-element animations such as skeleton glimmers.

How do I stop requestAnimationFrame loops for offscreen canvas or WebGL?▼

Gate the RAF loop directly with an IntersectionObserver: start rendering when the canvas intersects, cancel the animation frame when offscreen, and resume on re-entry. CSS animation-play-state cannot pause JavaScript render loops, so the loop itself must be controlled.

Does this work with React, Next.js, and Three.js applications?▼

Yes, the workflow targets React, Vite, and Next.js pages and covers Three.js, GSAP, and Matter.js effects. It includes React-specific cleanup guidance such as capturing ref.current values in effects and guarding async loaders with isDisposed flags.

How do I detect memory leaks in a single-page application?▼

Sample DOM element, canvas, image, and iframe counts before and after bounded route cycles, plus an idle sample after 10-30 seconds. Monotonic growth indicates retained resources; if heap APIs return null, rely on observable counts plus source audit of timers, listeners, and observers.

Why is my page still slow after pausing CSS animations?▼

CSS profiling does not prove JavaScript RAF loops have stopped, so canvas and WebGL renderers may still run offscreen. Long pages also need measurements at mid-page and footer positions, since a single top-of-page sample misses below-the-fold animation work.

Related Skills

Explore More Software Engineering Skills→
mengxi-reammengxi-ream
9.0k

extension-real-browser-testing

Reproduce extension issues in real browsers with built artifacts and local repro pages.

Community
Advanced
TrainLCDTrainLCD
71

argent-react-native-profiler

Profile React Native Hermes apps for re-render counts and CPU usage.

Official
Advanced
channingwaltonchanningwalton
3

Refactor

Refactor code incrementally while preserving behavior and passing tests.

Community
Advanced
PatternsDevPatternsDev
235

async-components

Lazy-load heavy Vue components with defineAsyncComponent and dynamic imports.

Official
Intermediate