transition-panel

Pane Switching

Basic Cross-Fade

▼
Pane 0: Hello from the first pane
Pane 1: This is the second pane with more text to make it taller.
Extra line here.
Pane 2: Third pane content

Rapid Switching

▼
Rapid Pane 0
Rapid Pane 1
Slightly taller
Rapid Pane 2
Even
Taller
Content

Varying Content Heights

▼
One line.
Line 1
Line 2
Line 3
Line 4
Line 5

Paragraph 1 of several.

Paragraph 2 with more detail about the content being displayed.

Paragraph 3 showing how the panel handles multi-paragraph content.

Paragraph 4: still going strong.

This pane is very tall to test large height differences.

Line after line after line.

More content here.

And even more content.

Keep scrolling... just kidding, it's auto-height.

But there's a lot of text here.

Seven paragraphs total.

Height

Explicit Height

▼
Height test content
Line 2
Line 3

Auto-Height (Dynamic Content)

▼

Initial content

Height + Pane Switch Combined

▼

Switch pane and height simultaneously.

Pane A at variable height
Pane B at variable height
Extra content line

Collapse / Expand

Basic Collapse

▼
Collapsible content here.
More lines.
Even more.

Accordion (Stacked Collapsibles)

▼

Click headers to expand/collapse. Tests vertical stacking of multiple collapsible panels.

Section A ▼
Accordion section A content. This panel is auto-height and will push everything below it down when it expands.
Section B ▼
Accordion section B. Initially collapsed. Opening this should smoothly push section C down.
Section C ▼
Accordion section C. Also initially collapsed.

This one has extra content to make it taller than section B.

Notice how the page layout adjusts smoothly.

Collapse + Inner Pane Switch

▼
Inner pane 0: short content
Inner pane 1: taller content here
with multiple
lines of text
to show height change

Vertical Stacking

5 Stacked Panels with Pane Switching

▼

Each panel below switches panes independently. Switching any panel should smoothly adjust the total page height without glitches.

Panel 1
Stack Panel 1 — Pane A
Stack Panel 1 — Pane B
A bit taller
Panel 2
Stack Panel 2 — Pane A (short)
Stack Panel 2 — Pane B
Medium height
with three lines
Stack Panel 2 — Pane C
Taller still
Line 3
Line 4
Line 5
Panel 3
Stack Panel 3 — Pane A
Two lines
Stack Panel 3 — Pane B
Panel 4 (collapsible)
Stack Panel 4 — Collapsible content
This pushes panel 5 down when open
Panel 5
Stack Panel 5 — Pane A (below panel 4)
Stack Panel 5 — Pane B
Notice this stays in place even when panel 4 collapses

Nested Panels (3 Levels Deep)

▼

Outer A — contains a nested panel:

Mid A — contains an inner panel:

Inner pane 1: The deepest level
Inner pane 2: Different height
With extra content
Three levels deep!
Mid B: Simple content at mid-level

Outer B: Switching here should animate the entire height change from whatever was visible in Outer A.

This tests that nested panels work when parent switches away and back.

Orchestration

Settle Chaining (A collapses → B expands)

▼
Panel A
Panel A content
Panel B
Panel B content

Sequential Cascade (4 panels)

▼

Panel 1 expands → on settle, Panel 2 expands → on settle, Panel 3 → Panel 4.

Cascade 1
Cascade panel 1 expanded!
Cascade 2
Cascade panel 2 expanded!
Cascade 3
Cascade panel 3 expanded!
Cascade 4
Cascade panel 4 expanded! All done.

Edge Cases

Zero / One Children

▼
Zero children
One child
Only child

Duration Extremes

▼
0ms duration
Instant A
Instant B
2000ms duration
Slow A
Slow B
Takes 2 seconds to transition

Many Children (10 panes)

▼
Pane 0 of 10
Pane 1 of 10
Pane 2 of 10
Pane 3 of 10
Pane 4 of 10
Pane 5 of 10
With extra
height
Pane 6 of 10
Pane 7 of 10
Pane 8 of 10
Pane 9 of 10 — the last one
Event Log