Physical stagger

Matt Perry

In this tutorial, we're going to build the Physical stagger example step-by-step.

This example is rated advanced difficulty, which means we assume you're already quite familiar with Motion (and JavaScript in general).

Here's a live demo of the example we're going to be creating:

Loading...

Checking Motion+ status…

The Physical stagger tutorial

is exclusive to Motion+

300+ examples & 40+ tutorials

Premium APIs

Motion Studio editing tools

alpha

Discord community

Early access

Lifetime updates

One-time payment, lifetime updates

Already joined?

Introduction

The Physical stagger example shows how to create animations that stagger based on physical distance rather than index order. Instead of animating grid cells one after another sequentially, each cell animates based on how far it is from a random origin point - creating a ripple effect that spreads outward.

This tutorial uses the animate function from Motion to animate multiple elements with custom delays calculated from their physical positions.

Motion is supported by the best in the industry.