skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize-web-animations

Profile and pause offscreen CSS animations and canvas requestAnimationFrame loops in frontend pages.

Updated May 5, 2026
Search Tags:#css animations#memory leaks#webgl#performance profiling#intersectionobserver#web animations#requestanimationframe
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill optimize-web-animations-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize-web-animations
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/optimize-web-animations
Command: npx skills add https://github.com/josippapez/ai-setup --skill optimize-web-animations-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend pages keep running CSS animations, marquee tracks, skeleton loaders, and canvas/WebGL render loops even when they are offscreen, wasting CPU/GPU and causing janky scrolling, long-session slowdowns, and memory leaks. This Skill measures the real page in a browser, finds what is still running offscreen, and applies targeted visibility-based fixes with proper cleanup. ## Core Features & Use Cases - Live Browser Profiling: Captures baseline measurements at top, mid, footer, and mobile viewports, counting running animations by name, play state, and visibility, including ::before and ::after pseudo-elements. - Offscreen Animation Gating: Adds IntersectionObserver-driven is-offscreen classes that pause CSS animations, and directly starts/cancels requestAnimationFrame loops for canvas, WebGL, GSAP, Three.js, and physics effects. - Memory Leak Hardening: Audits and fixes cleanup for timers, listeners, observers, GSAP tweens, WebGL resources, media streams, and async loaders that resolve after unmount, verified with idle and route-cycle samples. - Use Case: A React/Vite landing page makes the user's laptop hot after a few minutes. The Skill profiles the page, finds 14 offscreen animations still running plus a WebGL canvas looping while hidden, pauses them with IntersectionObserver, and verifies offscreenRunningCount reaches 0. ## Quick Start Ask the agent to profile my localhost page for offscreen animations and memory leaks, then pause everything that runs outside the viewport and verify the fix in the browser.

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 are offscreen?▼

Use an IntersectionObserver to toggle an is-offscreen class on sections and animated elements, then apply CSS rules setting animation-play-state to paused for those selectors. Include ::before and ::after pseudo-element selectors since they keep animating independently.

How to stop requestAnimationFrame loops for canvas and WebGL when not visible?▼

Gate the RAF loop directly with an IntersectionObserver: start the loop when the canvas intersects, cancel the animation frame when it leaves the viewport, 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 GSAP animations?▼

Yes, the workflow targets React, Vite, and Next.js pages and covers GSAP timelines and tweens, Three.js WebGL scenes, and Matter.js physics. Cleanup kills GSAP tweens, disposes WebGL textures and renderers, and captures ref.current values inside effects before returning cleanup.

Why does my web page get slower the longer it stays open?▼

Long-session slowdowns usually come from leaked timers, observers, event listeners, or accumulating DOM nodes and canvases that are never cleaned up on route changes. The Skill samples element, canvas, image, and iframe counts across idle periods and route cycles to detect monotonic growth.

What are the limitations of browser-based memory leak detection?▼

Browser heap APIs like performance.memory may return null in sandboxed environments, and monkey-patching listeners or timers can be blocked. In those cases the audit relies on stable observable counts of DOM elements, canvases, and iframes plus source-level cleanup review, and states the limitation explicitly.

Related Skills

Explore More Software Engineering Skills→
davila7davila7
30.5k

nextjs-app-router-patterns

Implements Next.js 14+ App Router patterns for Server Components, routing, and data fetching.

Community
Intermediate
freitasp1freitasp1

code-quality-gate

Enforce a 5-stage quality gate system for TypeScript, lint, format, unit tests, and builds.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
yigitkonuryigitkonur
2

audit-swiftui-animation-motion

Audit macOS SwiftUI animation code for deprecated APIs, availability breaks, and missing Reduce Motion support.

Community
Advanced