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, CTRLC "Copy Block Reference", then right-click an empty cell on the target pane and "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
