Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Smooth 60fps web animation v1.0.0

Use this resource to make a web page's animations smooth

New

  • 569 downloads
  • 203 likes
  • 169 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install smooth-web-animation

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent replaces expensive properties (width, top, box-shadow) with compositor-only equivalents, applies the FLIP technique to animate layout changes and handles height auto. It then checks in the developer tools that no layout recalculation happens during the animation.

Mostly picked by

Updated November 2, 2026

No preview: generated card

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: core rule, shadow, FLIP, height auto, will-change, verification
  • patterns-and-profiling.md: full examples (accordion, list, parallax) and profiling

Good fit for

  • A hover or scroll effect that stutters
  • Animating the opening of an auto-height panel
  • Reordering cards with a smooth animation

Not for

  • Creating brand animations or video
  • Optimizing anything other than animation

Tags

  • performance
  • animation
  • css
  • flip
  • 60fps

About

You say

"My dropdown menu and cards stutter on hover. Make the animations smooth at 60 frames per second."

No preview: generated card

Skill published by iart-ai under the MIT license.

Show more

Prerequisites

You bring
The page or component that stutters

How to use it

  1. Copy the skill folder into your agent's skills folder.
  2. Point the agent to the page or component that stutters.
  3. Check in the developer tools that no Layout or Paint happens during the animation.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0 KB
  • references/patterns-and-profiling.md4.8 KB
  • SKILL.md10.7 KB

Origin and licence

Modified by PalateKit

Author
iart-ai
Source
github.com/iart-ai/web-animation-skills/tree/b6dba3eb759726845a44163ff0bad70dd9e7fbb6/skills/60fps-animation
Licence
MIT

Notice

Version modifiée de « 60fps-animation » (iart-ai, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Why animate only transform and opacity?

Those two properties are handled by the compositor and avoid recalculating the layout on every frame.

Will it change my design?

No, it keeps the visual effect and only changes how it is produced.