Motion · Use the system

Choose a motion pairing

Answer the three questions in the sidebar and copy the result.

Spring into place, with a little give

350ms · a small component

Copy

Tailwind CSS var

duration-[var(--et-motion-spring-fast-spatial-duration)] ease-[var(--et-motion-spring-fast-spatial-easing)]

Show the code, and what it is called

duration-[var(--et-motion-spring-fast-spatial-duration)] ease-[var(--et-motion-spring-fast-spatial-easing)]

Material calls this md.sys.motion.spring.fast.spatial. How springs work →

Easing

Duration

Damping

Stiffness

Resolves to cubic-bezier(0.27, 1.06, 0.18, 1) over 350ms · Material's published conversion