Scale Pop

Elements zoom from 92% to full size with a springy overshoot, landing with a satisfying pop. Made for modals, popovers, and toasts — anything that interrupts deserves an entrance with a little confidence.

playfulenergeticcreativeecommercetech

Transition Preview

Duration350ms

Easingcubic-bezier(0.34, 1.56, 0.64, 1)

Enter fromopacity 0 + scale(0.92)

Staggernone

Export Snippets

Switch formats without compressing the preview layout.

AI Prompt

Natural-language design direction for AI coding tools.

Use the Scale Pop transition for overlay surfaces. Modals, popovers, dropdown menus, and toasts enter by scaling from 0.92 to 1 while fading from 0 to 1 over 350ms with the back-out curve cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly past full size before settling — that overshoot is the "pop". Set transform-origin to where the surface conceptually comes from: center for modals, the trigger corner for popovers and menus. Exits reverse to scale 0.96 with a plain ease-out over 150ms and no bounce, so dismissal feels immediate. The mood is playful and tactile without becoming cartoonish.

Transition

Scale Pop

playfulenergeticcreativeecommercetech

Transition Preview

Duration350ms

Easingcubic-bezier(0.34, 1.56, 0.64, 1)

Enter fromopacity 0 + scale(0.92)

Staggernone

Export Snippets

Copy or download the current format while keeping the preview in view.

AI Prompt

Natural-language design direction for AI coding tools.

Use the Scale Pop transition for overlay surfaces. Modals, popovers, dropdown menus, and toasts enter by scaling from 0.92 to 1 while fading from 0 to 1 over 350ms with the back-out curve cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly past full size before settling — that overshoot is the "pop". Set transform-origin to where the surface conceptually comes from: center for modals, the trigger corner for popovers and menus. Exits reverse to scale 0.96 with a plain ease-out over 150ms and no bounce, so dismissal feels immediate. The mood is playful and tactile without becoming cartoonish.

Back to Explore

Transition

4 export formats

Scale Pop

playfulenergeticcreativeecommercetech

Transition Preview

Duration350ms

Easingcubic-bezier(0.34, 1.56, 0.64, 1)

Enter fromopacity 0 + scale(0.92)

Staggernone

Export Snippets

Switch formats without compressing the preview layout.

AI Prompt

Natural-language design direction for AI coding tools.

Use the Scale Pop transition for overlay surfaces. Modals, popovers, dropdown menus, and toasts enter by scaling from 0.92 to 1 while fading from 0 to 1 over 350ms with the back-out curve cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly past full size before settling — that overshoot is the "pop". Set transform-origin to where the surface conceptually comes from: center for modals, the trigger corner for popovers and menus. Exits reverse to scale 0.96 with a plain ease-out over 150ms and no bounce, so dismissal feels immediate. The mood is playful and tactile without becoming cartoonish.

Transition

Scale Pop

playfulenergeticcreativeecommercetech

Transition Preview

Duration350ms

Easingcubic-bezier(0.34, 1.56, 0.64, 1)

Enter fromopacity 0 + scale(0.92)

Staggernone

Export Snippets

Copy or download the current format while keeping the preview in view.

AI Prompt

Natural-language design direction for AI coding tools.

Use the Scale Pop transition for overlay surfaces. Modals, popovers, dropdown menus, and toasts enter by scaling from 0.92 to 1 while fading from 0 to 1 over 350ms with the back-out curve cubic-bezier(0.34, 1.56, 0.64, 1), which overshoots slightly past full size before settling — that overshoot is the "pop". Set transform-origin to where the surface conceptually comes from: center for modals, the trigger corner for popovers and menus. Exits reverse to scale 0.96 with a plain ease-out over 150ms and no bounce, so dismissal feels immediate. The mood is playful and tactile without becoming cartoonish.