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.

Staggered animation sequences v1.0.0

Use this resource to choreograph the appearance of several page elements

New

  • 474 downloads
  • 103 likes
  • 189 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install orchestrated-staggered-motion

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 coordinates the entrance of several elements with linear, accelerating or decelerating stagger delays. It keeps one family of easing curves for cohesion and applies Disney's principles to the whole. You get a CSS reveal pattern and a simple JavaScript orchestration.

Mostly picked by

Updated November 2, 2026

Page elements appearing one after another with a slight delay.

Details

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

Similar resources

View all

What you get

  • SKILL.md: orchestration principles and timing strategies
  • CSS examples of stagger and reveal
  • A JavaScript sequence orchestration example

Good fit for

  • Making a page's cards appear in a cascade
  • Animating a dashboard's load
  • Opening a menu with staggered items

Not for

  • A single animation on one element
  • A motion design video
  • Work that needs a detailed, full-length guide

Tags

  • animation
  • stagger
  • css
  • sequence
  • reveal

About

You say

"Make my homepage sections appear in a cascade, with a soft stagger."

Page elements appearing one after another with a slight delay.

Skill published by dylantarre under the MIT license.

Show more

Prerequisites

You bring
The list of elements to animate

How to use it

  1. Place the skill folder in your agent's skills folder.
  2. Name the elements to sequence and the order you want.
  3. Test the rhythm and adjust the delays.

Content preview

Files

  • LICENSE1.1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md4 KB

Origin and licence

Modified by PalateKit

Author
dylantarre
Source
github.com/dylantarre/animation-principles/tree/83597134ba8ff59838270f94d7ac7282ffa3b54d/skills/10-by-time-scale/orchestrated-sequences
Licence
MIT

Notice

Version modifiée de « orchestrated-sequences » (dylantarre, 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

Is this skill complete?

It is short. Pair it with a timing and easing rules skill for a fuller framework.

Do I need an animation library?

No. The examples use plain CSS and JavaScript.