skills.rest
marketiv-id
marketiv-idOFFICIAL
Explore all skills by this author →
GitHub

animation-benchmark

Benchmarks animated sections for FPS stability, long tasks, layout shift, and ScrollTrigger sanity before merge.

Updated Feb 24, 2026
Search Tags:#performance#benchmark#animation#fps#gsap#scrolltrigger#layout shift
One-click install
npx skills add https://github.com/marketiv-id/marketiv-web --skill animation-benchmark-marketiv-id
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animation-benchmark
Source: https://github.com/marketiv-id/marketiv-web/tree/main/.github/skills/animation-benchmark
Command: npx skills add https://github.com/marketiv-id/marketiv-web --skill animation-benchmark-marketiv-id

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Animation changes in pull requests often ship with hidden performance regressions like jank, long main-thread tasks, and layout shifts that only appear on real devices. This Skill provides a structured pre-merge benchmark so teams can catch animation performance issues before they reach production. ## Core Features & Use Cases - Runtime Sanity Checks: Verifies animation lifecycles run without errors, ScrollTrigger markers are disabled in production, and trigger points do not cause scroll jumps or glitches. - Performance Indicator Collection: Estimates FPS stability, identifies long-task hotspots blocking the main thread, and flags CLS risk during animation and media loading. - Pass/Warning/Fail Gating: Produces a clear benchmark verdict with identified bottlenecks and prioritized, actionable optimization recommendations. - Use Case: After refactoring a GSAP/ScrollTrigger hero section, run this benchmark against desktop and mid-range mobile profiles to confirm no jitter, layout shift, or long tasks were introduced before merging the PR. ## Quick Start Run an animation benchmark on the hero section of the landing page for desktop and mid-range mobile device profiles and report pass, warning, or fail with bottlenecks.

Frequently Asked Questions about animation-benchmark

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

FAQPage Schema
How do I benchmark animation performance before merging a PR?▼

Define the target route or section and device profiles, then run runtime sanity checks, collect FPS and long-task indicators, and inspect asset rendering pressure. The benchmark concludes with a pass, warning, or fail verdict plus optimization recommendations.

How to detect ScrollTrigger issues in production builds?▼

Verify that ScrollTrigger markers are disabled in production mode and that trigger points do not cause jumps or glitches during fast scrolling. Active markers in production trigger a mandatory warning requiring fixes.

What causes layout shift during scroll animations?▼

CLS risk typically comes from unstable media loading in hero or above-the-fold sections and animating layout-affecting properties. Check that large media uses proper next/image sizing strategies and avoid animating properties that trigger layout thrashing.

When should an animation benchmark fail a pull request?▼

A benchmark fails when trigger misalignment or jitter is consistent, or when repeated long tasks during animation significantly harm UX. CLS risk from media loading instability can also produce a fail depending on severity.

Does this benchmark work with GSAP and Lenis animations?▼

Yes, the benchmark is designed for stacks using GSAP, ScrollTrigger, and Lenis, and is recommended after any refactor of those libraries. It checks animation lifecycle errors, trigger alignment, and rendering pressure specific to these tools.

Related Skills

Explore More Software Engineering Skills→
TOBIASpuchitoTOBIASpuchito

citec-motion-system

Implements scroll animations and reveal motion with GSAP, ScrollTrigger, and Lenis in Astro and React.

Community
Intermediate
PostalocityPostalocity
1

performance-analysis

Analyze runtime metrics to identify bottlenecks and prioritize optimization recommendations.

Official
Advanced
sigmadigitalzasigmadigitalza
1

web-performance

Analyze web application performance against Core Web Vitals metrics.

Official
Advanced
githubgithub
37.6k

chrome-devtools

Automate browser control and debugging via the Chrome DevTools MCP.

Official
Advanced