Transitions & Morphing
Transitions are what PaneFlow is built around. You never keyframe them - you describe each pane, and PaneFlow animates every difference between two panes when the viewer navigates. This page covers the four layers that motion comes from.
#Enter & Exit Directions
A block that exists on only one pane needs to arrive and leave somehow. Its "Enter & Exit" settings choose how: "Enter From" and "Exit To" each take a direction - any of the eight sides and corners, "Center" (scaling in place), or "Fade". A grid of cards entering from alternating directions already makes a lively pane.
The global "Blocks Delay" in Project Settings staggers blocks slightly as they enter, so multi-block panes assemble rather than pop in.
#Morphing: One Block on Several Panes
Place the same block on multiple panes (select it and press CTRLC, then hover an empty cell on the target pane and press CTRLALTV, or right-click the empty cell and choose "Paste Block Reference") and the enter/exit directions stop applying to it. Instead, PaneFlow animates the block from its placement on one pane to its placement on the next: the full-screen hero shrinks into a corner thumbnail, the sidebar card expands to take over.
The block's content stays identical across panes; only the layout differs. This is the shared-content, per-pane-layout model from Core Concepts.
"Blocks Transition Duration" in Project Settings sets how long all of this takes.
#Per-Pane Element Overrides
Inside a shared block, each element's position, scale, rotation, and opacity are stored per pane. Select the element while viewing a specific pane, change any of these, and only that pane is affected - and the change animates during navigation:
- Opacity 0 on one pane, 1 on the next: the element fades in mid-transition.
- Different X/Y: it glides.
- Different Scale or Rotate: it shrinks, grows, or turns.
Text and custom code can additionally have a different width and height per pane. Pane-level layout values - "Blocks Padding", "Blocks Gap", "Block Radius" - can also be overridden per pane and animate the same way, reshaping the whole grid between panes (see Working With Panes).
Everything an element does during a transition composes: the block morphs, the element fades and scales within it, and any entrance animation plays once the pane is active.
#Parallax Depth
"Parallax" in an element's "Visual Effects" adds extra movement during transitions - the element shifts further than its block along the transition direction, the way nearby trees rush past a car window while mountains barely move. The value runs 0-10, and treating it as z-depth layering works well:
- 0 - backdrop and hero content that should feel anchored
- 1-3 - mid-ground content like body copy and secondary text
- 4-7 - foreground accents: labels, page indicators, decorative bits
- 8-10 - reserved for deliberately dramatic standouts
Vary it across the elements of one pane and a flat layout gains real depth: for a stack of overlapping cards, give the back card 1, the middle 3, the front 6, and they fan out during every transition while staying coherent at rest.
#Next
- Working With Blocks - the block reference workflow
- Core Concepts - why content is shared and layout is not
- Element Animations - motion within a pane
