1import{j as s}from"./chunk-6CSD65Y2-BDCp14CY.js";const l={title:"Stagger",displayTitle:null,description:"An example of staggering animations in Motion using its stagger() function.",slug:"js-stagger",framework:"js",category:"Basics",level:0,levelScale:5,date:"2025-01-02T00:00:00.000Z",listed:!0,featured:!0,authorSlug:"matt-perry",isPlus:!1,exampleUrl:"https://examples.motion.dev/js/stagger",screenshot:"https://examples.motion.dev/thumbnails/js/stagger.png",apis:["animate","stagger"],steps:[{id:"introduction",title:"Introduction",locked:!1},{id:"get-started",title:"Get started",locked:!1},{id:"lets-animate",title:"Let's animate!",locked:!1},{id:"conclusion",title:"Conclusion",locked:!1}],timeToComplete:5,outcome:null};function a(e){const i={a:"a",code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...e.components},{MotionScorePromo:t}=i;return t||h("MotionScorePromo"),s.jsxs(s.Fragment,{children:[s.jsx(i.h2,{id:"introduction",children:"Introduction"}),` 2`,s.jsxs(i.p,{children:["The Stagger example shows how to create elegant sequential animations where multiple elements animate one after another with a delay between them. This example uses the ",s.jsx(i.a,{href:"https://motion.dev/docs/animate",children:s.jsx(i.code,{children:"animate"})})," function to animate multiple elements, and the ",s.jsx(i.a,{href:"https://motion.dev/docs/stagger",children:s.jsx(i.code,{children:"stagger"})})," utility to control the timing between each animation."]}),` 3`,s.jsx(i.p,{children:"Staggered animations are everywhere in modern UIs - from list items fading in on page load to menu items cascading open."}),` 4`,s.jsx(i.h2,{id:"get-started",children:"Get started"}),` 5`,s.jsx(i.p,{children:"Let's start with four list items that are invisible by default:"}),` 6`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsxs(i.code,{children:[s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"ul"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#a78bfa"},children:" class"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"="}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"example"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 7`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:" <"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"></"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 8`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:" <"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"></"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 9`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:" <"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"></"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 10`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:" <"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"></"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"li"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 11`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"</"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"ul"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 12`,s.jsx(i.span,{className:"line"}),` 13`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"<"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"style"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]}),` 14`,s.jsx(i.span,{className:"line",children:s.jsx(i.span,{style:{"--shiki-light":"#6A737D","--shiki-light-font-style":"inherit","--shiki-dark":"#51597D","--shiki-dark-font-style":"italic"},children:" /** Copy styles from example source code */"})}),` 15`,s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:"</"}),s.jsx(i.span,{style:{"--shiki-light":"#22863A","--shiki-dark":"#f43f5e"},children:"style"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#c0caf5"},children:">"})]})]})}),` 16`,s.jsxs(i.p,{children:["Notice that each list item has ",s.jsx(i.code,{children:"opacity: 0"}),", making them invisible when the page loads. We'll use Motion to animate them into view with a stagger effect."]}),` 17`,s.jsx(i.h2,{id:"lets-animate",children:"Let's animate!"}),` 18`,s.jsx(i.h3,{id:"import-from-motion",children:"Import from Motion"}),` 19`,s.jsx(i.p,{children:"First, import the functions we need from Motion:"}),`
20`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsx(i.code,{children:s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#7DCFFF"},children:"import"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" { "}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:"animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:" stagger"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"}),s.jsx(i.span,{style:{"--shiki-light":"#D73A49","--shiki-dark":"#7DCFFF"},children:" from"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:' "'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:"motion"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'})]})})}),` 21`,s.jsxs(i.p,{children:["The ",s.jsx(i.code,{children:"animate"})," function lets us animate any DOM element, and ",s.jsx(i.code,{children:"stagger"})," is a special timing utility that creates sequential delays."]}),` 22`,s.jsx(i.h3,{id:"create-the-staggered-animation",children:"Create the staggered animation"}),` 23`,s.jsxs(i.p,{children:["Now we can animate all four list items with a single call to ",s.jsx(i.code,{children:"animate"}),":"]}),` 24`,s.jsx(i.pre,{className:"shiki shiki-themes github-light tokyo-night",style:{"--shiki-light":"#24292e","--shiki-dark":"#a9b1d6","--shiki-light-bg":"#fff","--shiki-dark-bg":"#1a1b26"},tabIndex:"0",children:s.jsx(i.code,{children:s.jsxs(i.span,{className:"line",children:[s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:"animate"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#34d399"},children:".example li"}),s.jsx(i.span,{style:{"--shiki-light":"#032F62","--shiki-dark":"#7dcfff"},children:'"'}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:" opacity"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 1"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:" y"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" ["}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:"50"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:" 0"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"]"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" }"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:","}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" {"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#73DACA"},children:" delay"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#7dcfff"},children:":"}),s.jsx(i.span,{style:{"--shiki-light":"#6F42C1","--shiki-dark":"#60a5fa"},children:" stagger"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:"("}),s.jsx(i.span,{style:{"--shiki-light":"#005CC5","--shiki-dark":"#FF9E64"},children:"0.05"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:")"}),s.jsx(i.span,{style:{"--shiki-light":"#24292E","--shiki-dark":"#60a5fa"},children:" })"})]})})}),` 25`,s.jsx(i.p,{children:"Let's break down what's happening here:"}),` 26`,s.jsxs(i.p,{children:["First, ",s.jsx(i.code,{children:"animate"}
26)," accepts a CSS selector as its first argument - ",s.jsx(i.code,{children:'".example li"'})," targets all four list items at once."]}),` 27`,s.jsxs(i.p,{children:["The second argument defines what to animate. We're animating ",s.jsx(i.code,{children:"opacity: 1"})," to fade the elements in, and ",s.jsx(i.code,{children:"y: [50, 0]"})," to move them from ",s.jsx(i.code,{children:"50"})," pixels below their final position up to ",s.jsx(i.code,{children:"0"}),". Using an array like ",s.jsx(i.code,{children:"[50, 0]"})," tells Motion to animate from the first value to the second, creating an upward sliding motion."]}),` 28`,s.jsxs(i.p,{children:["The third argument is where the magic happens. By setting ",s.jsx(i.code,{children:"delay: stagger(0.05)"}),", we're telling Motion to add a ",s.jsx(i.code,{children:"0.05"})," second delay between each element's animation. So the first element animates immediately, the second starts ",s.jsx(i.code,{children:"0.05"})," seconds later, the third at ",s.jsx(i.code,{children:"0.1"})," seconds, and the fourth at ",s.jsx(i.code,{children:"0.15"})," seconds. This creates the smooth cascading effect."]}),` 29`,s.jsxs(i.p,{children:["Without ",s.jsx(i.code,{children:"stagger"}),", all four elements would animate at exactly the same time. The ",s.jsx(i.code,{children:"stagger"})," utility makes it effortless to sequence animations across multiple elements."]}),` 30`,s.jsx(i.h2,{id:"conclusion",children:"Conclusion"}),` 31`,s.jsx(i.p,{children:"We've built a staggered animation that brings list items into view one after another. This technique works with any number of elements and any CSS properties - try experimenting with different stagger delays, animation properties, or adding more list items to see how Motion automatically handles them all."}),` 32`,s.jsx(t,{})]})}function r(e={}){const{wrapper:i}=e.components||{};return i?s.jsx(i,{...e,children:s.jsx(a,{...e})}):a(e)}function h(e,i){throw new Error("Expected component `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{r as default,l as frontmatter};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.