Scale entrance

Bring an element into view by increasing its scale.

Live preview Try the effect

MOTION PREVIEW

Everything is ready

Make every change feel natural.

View project

240ms · ease-out

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Bring an element into view by increasing its scale. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Small overlays, confirmation feedback and newly added elements.

Related concepts

Scaling changes size; sliding changes position. Avoid large zoom movements.

Describe this effect

Output language

Reveal the element by scaling it from slightly smaller to its normal size without shifting surrounding layout. Use a 240ms ease-out transition. Show the final state immediately when reduced motion is requested.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.