Edit Stagger

Name

Also known as (comma separated)

Brief definition Sequential offsetting of animations across items.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "interval", "type": "number", "label": "Stagger interval (ms)", "default": 100, "min": 0, "max": 300, "step": 20 }, { "id": "duration", "type": "number", "label": "Item duration (ms)", "default": 450, "min": 150, "max": 1000, "step": 50 }, { "id": "direction", "type": "select", "label": "Order", "default": "forward", "options": [ "forward", "reverse" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mot-stg-stage\" data-direction=\"{{direction}}\">\n <span class=\"mot-stg-chip mot-stg-chip--1\" style=\"background:{{accent}};\"></span>\n <span class=\"mot-stg-chip mot-stg-chip--2\" style=\"background:{{accent}};\"></span>\n <span class=\"mot-stg-chip mot-stg-chip--3\" style=\"background:{{accent}};\"></span>\n <span class=\"mot-stg-chip mot-stg-chip--4\" style=\"background:{{accent}};\"></span>\n <span class=\"mot-stg-chip mot-stg-chip--5\" style=\"background:{{accent}};\"></span>\n <p class=\"mot-stg-caption\">{{interval}}ms between each item &middot; {{direction}} order</p>\n</div>\n<style>\n.mot-stg-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; display: flex; gap: 8px; font: 12px system-ui, sans-serif; color: #241430aa; flex-wrap: wrap; }\n.mot-stg-chip { width: 32px; height: 32px; border-radius: 8px; }\n.mot-stg-caption { flex-basis: 100%; margin: 8px 0 0; }\n@media (prefers-reduced-motion: no-preference) {\n .mot-stg-chip { animation: mot-stg-in {{duration}}ms ease-out infinite; }\n [data-direction=\"forward\"] .mot-stg-chip--1 { animation-delay: calc({{interval}}ms * 0); }\n [data-direction=\"forward\"] .mot-stg-chip--2 { animation-delay: calc({{interval}}ms * 1); }\n [data-direction=\"forward\"] .mot-stg-chip--3 { animation-delay: calc({{interval}}ms * 2); }\n [data-direction=\"forward\"] .mot-stg-chip--4 { animation-delay: calc({{interval}}ms * 3); }\n [data-direction=\"forward\"] .mot-stg-chip--5 { animation-delay: calc({{interval}}ms * 4); }\n [data-direction=\"reverse\"] .mot-stg-chip--1 { animation-delay: calc({{interval}}ms * 4); }\n [data-direction=\"reverse\"] .mot-stg-chip--2 { animation-delay: calc({{interval}}ms * 3); }\n [data-direction=\"reverse\"] .mot-stg-chip--3 { animation-delay: calc({{interval}}ms * 2); }\n [data-direction=\"reverse\"] .mot-stg-chip--4 { animation-delay: calc({{interval}}ms * 1); }\n [data-direction=\"reverse\"] .mot-stg-chip--5 { animation-delay: calc({{interval}}ms * 0); }\n @keyframes mot-stg-in { 0%,20% { opacity: .25; transform: translateY(6px); } 40%,100% { opacity: 1; transform: translateY(0); } }\n}\n</style>", "tailwind": "<div class=\"w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl flex gap-2 flex-wrap font-sans text-xs text-[#241430]/70\" data-direction=\"{{direction}}\">\n <span class=\"tw-stg-chip tw-stg-1 w-8 h-8 rounded-lg\" style=\"background:{{accent}};\"></span>\n <span class=\"tw-stg-chip tw-stg-2 w-8 h-8 rounded-lg\" style=\"background:{{accent}};\"></span>\n <span class=\"tw-stg-chip tw-stg-3 w-8 h-8 rounded-lg\" style=\"background:{{accent}};\"></span>\n <span class=\"tw-stg-chip tw-stg-4 w-8 h-8 rounded-lg\" style=\"background:{{accent}};\"></span>\n <span class=\"tw-stg-chip tw-stg-5 w-8 h-8 rounded-lg\" style=\"background:{{accent}};\"></span>\n <p class=\"basis-full mt-2\">{{interval}}ms between each item &middot; {{direction}} order</p>\n</div>\n<style>\n@media (prefers-reduced-motion: no-preference) {\n .tw-stg-chip { animation: mot-stg-tw-in {{duration}}ms ease-out infinite; }\n [data-direction=\"forward\"] .tw-stg-1 { animation-delay: calc({{interval}}ms * 0); }\n [data-direction=\"forward\"] .tw-stg-2 { animation-delay: calc({{interval}}ms * 1); }\n [data-direction=\"forward\"] .tw-stg-3 { animation-delay: calc({{interval}}ms * 2); }\n [data-direction=\"forward\"] .tw-stg-4 { animation-delay: calc({{interval}}ms * 3); }\n [data-direction=\"forward\"] .tw-stg-5 { animation-delay: calc({{interval}}ms * 4); }\n [data-direction=\"reverse\"] .tw-stg-1 { animation-delay: calc({{interval}}ms * 4); }\n [data-direction=\"reverse\"] .tw-stg-2 { animation-delay: calc({{interval}}ms * 3); }\n [data-direction=\"reverse\"] .tw-stg-3 { animation-delay: calc({{interval}}ms * 2); }\n [data-direction=\"reverse\"] .tw-stg-4 { animation-delay: calc({{interval}}ms * 1); }\n [data-direction=\"reverse\"] .tw-stg-5 { animation-delay: calc({{interval}}ms * 0); }\n @keyframes mot-stg-tw-in { 0%,20% { opacity: .25; transform: translateY(6px); } 40%,100% { opacity: 1; transform: translateY(0); } }\n}\n</style>", "react": "export function Stagger({\n interval = {{interval}},\n duration = {{duration}},\n direction = \"{{direction}}\",\n accent = \"{{accent}}\",\n}) {\n const order = direction === \"forward\" ? [0, 1, 2, 3, 4] : [4, 3, 2, 1, 0];\n return (\n <div style={{ width: \"100%\", maxWidth: 320, padding: 16, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, display: \"flex\", gap: 8, flexWrap: \"wrap\", fontFamily: \"system-ui, sans-serif\", fontSize: 12, color: \"#241430aa\" }}>\n {order.map((mult, i) => (\n <span key={i} className=\"chip\" style={{ width: 32, height: 32, borderRadius: 8, background: accent, \"--stg-delay\": `${mult * interval}ms` }} />\n ))}\n <p style={{ flexBasis: \"100%\", margin: \"8px 0 0\" }}>{interval}ms between each item &middot; {direction} order</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n .chip { animation: mot-stg-in ${duration}ms ease-out infinite; animation-delay: var(--stg-delay); }\n @keyframes mot-stg-in { 0%,20% { opacity: .25; transform: translateY(6px); } 40%,100% { opacity: 1; transform: translateY(0); } }\n }\n `}</style>\n </div>\n );\n}" }