Panel transitions

These control the container’s size animation as the panel opens and closes.

--ps-open-speed

Size transition duration when opening. Default: 0.25s.

--ps-open-timing

Easing when opening. Default: ease-in-out.

--ps-close-speed

Size transition duration when closing. Default: 0.25s.

--ps-close-timing

Easing when closing. Default: ease-in-out.

Demo

Both speeds are set to 1 second, so you can see the two halves separately: the container grows while the content fades in, and the content fades out while the container collapses.

#my-panel {
	--ps-open-speed:   0.25s;
	--ps-open-timing:  ease-in-out;
	--ps-close-speed:  0.25s;
	--ps-close-timing: ease-in-out;
}

Use --ps-open-transition-extra and --ps-close-transition-extra to animate extra CSS properties alongside the size, say a border or a shadow. The value is tacked onto the transition shorthand as-is, so write it in the same shape: property duration timing-function.

A common use is box-shadow, including an inset box-shadow as a border, because it has no effect on layout, it never interferes with the size measurement.

--ps-open-transition-extra

Extra transition shorthand values appended when opening. Unset by default.

--ps-close-transition-extra

Same, applied when closing.

Demo

#my-panel {
	--ps-open-transition-extra:  box-shadow var(--ps-open-speed) ease-in;
	--ps-close-transition-extra: box-shadow var(--ps-close-speed) ease-out;
	box-shadow: inset 0 0 0 6px yellow, 0 0 0 rgba(0,0,0,0.2);
}

#my-panel.is-open,
#my-panel.is-opening {
	box-shadow: inset 0 0 0 6px green, 0 0 1rem rgba(0,0,0,0.2);
}

By default the wrapper fades from 0 to full opacity as the panel opens. Set --ps-closed-opacity to 1 to keep the content fully visible while the container grows and shrinks, so only the size animates and there is no fade.

--ps-closed-opacity

Opacity of .panel-wrapper when closed or closing. Default: 0 (fades out). Set to 1 to disable the inner fade.

Demo

This panel keeps its content at full opacity. Only the container height animates, with no fade-in.

#my-panel {
	--ps-closed-opacity: 1;
}

Set --ps-wrapper-transform-from to move the wrapper as it appears. It animates from that transform to none on open, and back on close, sharing the --ps-open- / --ps-close- timing. The default none is a plain fade. It is also the lever for keeping animated SVG icons smooth on iPhone (see the note below).

The open and close transitions can have their own delays, both 0s by default. Use --ps-wrapper-open-delay to hold the content back until the box has grown a little, and --ps-wrapper-close-delay to let it linger before everything collapses.

--ps-wrapper-transform-from

Transform the wrapper reveals from, settling at none; reverses on close. Any transform. Default: none.

--ps-gpu-nudge

Invisible transform applied to the wrapper only while it animates, to keep reveals smooth on iOS Safari (see the note above). Default: translateY(-0.25px). Set to none to opt out (pure fade, no compositor nudge).

On iOS, an SVG element that transforms at the same time as a Panel transition (like a rotating chevron) can make the transition become choppy. Well, in Safari only. All other browsers are fine, but Safari really has issues with SVG transforms. PanelSet suppresses the choppy transitions with --ps-gpu-nudge that promotes the animating wrapper to the GPU (only while transitioning).

--ps-wrapper-open-delay

Delay before the wrapper reveals when opening. Default: 0s. (Legacy alias: --ps-wrapper-delay.)

--ps-wrapper-close-delay

Delay before the wrapper starts leaving when closing. Default: 0s.

Demo

#my-panel {
	--ps-wrapper-transform-from: translateY(-1rem);
	--ps-wrapper-open-delay: 0.1s;
}