Summary  
This chapter explains how to apply incremental delays to a group of elements using a stagger function—configuring delay values, start positions (e.g., left or center), reverse order, and custom patterns—to create cascading animations that can be combined with timelines and easing.  

General domain of usage  
User interface animations (e.g., navigation menus)

YW5pbWUoewogIHRhcmdldHM6ICIuY2lyY2xlIiwKICB0cmFuc2xhdGVZOiA1MCwKICBzY2FsZTogMS41LAogIGRlbGF5OiBhbmltZS5zdGFnZ2VyKDE1MCwgeyBmcm9tOiAibGVmdCIgfSksCiAgZWFzaW5nOiAiZWFzZU91dFF1YWQiLAogIGR1cmF0aW9uOiA4MDAKfSk7

PHN0eWxlPgogIC5jb250YWluZXIgewogICAgZGlzcGxheTogZmxleDsKICAgIGdhcDogMTJweDsKICAgIG1hcmdpbjogNDBweDsKICB9CgogIC5jaXJjbGUgewogICAgd2lkdGg6IDQwcHg7CiAgICBoZWlnaHQ6IDQwcHg7CiAgICBiYWNrZ3JvdW5kOiBzdGVlbGJsdWU7CiAgICBib3JkZXItcmFkaXVzOiA1MCU7CiAgfQo8L3N0eWxlPgo8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogIDxkaXYgY2xhc3M9ImNpcmNsZSI+PC9kaXY+CiAgPGRpdiBjbGFzcz0iY2lyY2xlIj48L2Rpdj4KICA8ZGl2IGNsYXNzPSJjaXJjbGUiPjwvZGl2PgogIDxkaXYgY2xhc3M9ImNpcmNsZSI+PC9kaXY+CiAgPGRpdiBjbGFzcz0iY2lyY2xlIj48L2Rpdj4KPC9kaXY+Cgo8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvYW5pbWVqcy8zLjIuMS9hbmltZS5taW4uanMiPjwvc2NyaXB0Pgo8c2NyaXB0IHNyYz0ic2NyaXB0LmpzIj48L3NjcmlwdD4=

With Anime.js, you can create visually appealing group animations using the **stagger** property. The `stagger` method lets you automatically add incremental delays to each element in a group, so animations start one after another instead of all at once. This is especially useful for animating lists, grids, or any repeated structure where you want a cascading or wave-like effect.

The basic usage of `anime.stagger()` involves specifying the delay in milliseconds. For example, `anime.stagger(150)` will make each subsequent element wait 150ms more than the previous before starting its animation. You can further control the sequence by setting the `from` option, such as `'left'`, `'center'`, or a specific index, to determine where the stagger starts.

You can also reverse the direction or create custom patterns for the stagger. For instance, using `from: 'center'` makes the animation begin in the middle and radiate outward. Staggered animations are commonly used for animating navigation menus, image galleries, or any scenario where you want to draw attention to multiple elements in a sequence.

By combining stagger with other Anime.js features like timelines and easing, you can build complex and engaging user interface effects that feel smooth and dynamic.

What does the stagger property in Anime.js allow you to do?

Which scenario is best suited for using staggered animations?

Animate web elements with modern motion techniques using Anime.js and JavaScript. Work with keyframes, timelines, stagger effects, easing, SVG animation, and text-based motion. Apply your skills through fun mini projects that deliver interactive and visually engaging results.

Learn how Anime.js structures animations using keyframes, timelines, and property-based motion. Build your first animated elements and explore the tools required to create smooth, modern effects. Establish a strong foundation before moving into more advanced motion techniques.

Enhance your animations with staggered sequences, custom easing, and motion helpers. Compare easing styles and experiment with randomness and dashoffset effects to create natural, expressive movement. Strengthen your ability to craft visually engaging animations with personality.

Apply Anime.js to SVG paths, individual letters, and interface elements to create expressive visual effects. Combine your skills in practical mini projects such as hero animations, content reveals, and loaders. Build polished results that demonstrate real-world animation techniques.

Staggered Animations

Staggered Animations