Motion

Transitions

Motion in SSHOW is built on transitions: animate between two scenes and the engine figures out the in-between for you.

Instead of keyframing every property by hand, you design a start scene and an end scene. SSHOW compares them and animates the differences — position, size, color, opacity, and more — into a smooth transition.

A rounded card stepping across the canvas in six frames along a gentle arc, its colour easing from purple to cyan and the leading frame glowing — an onion-skin trail of one object morphing between two states.
A transition is just two states and the in-between: SSHOW interpolates position, size, and colour from the start scene to the end scene in one smooth motion.

Note This guide currently covers scene transitions. Object-level timelines and keyframes are on the roadmap and will get their own section when they ship.

How transitions work

When you move from one scene to the next, the engine matches up objects and animates the change. The rules are simple and predictable.

  • Objects with the same name across two scenes are smoothly morphed from one state to the other.
  • Objects that only exist in the new scene fade in; objects that are removed fade out.
  • The scene background color cross-fades between the two scenes.

Tip Give matching objects the same name in both scenes to make them morph. Rename to break the match and get a clean fade instead.

Timing

Every transition is controlled by a duration and an optional delay, and you can fine-tune timing per property.

Duration
How long the transition takes, in milliseconds.
Delay
How long to wait before the transition begins, in milliseconds.
Per-property timing
By default every property follows the scene's transition (the panel shows "Inherited from Scene"). Click Override to give one property its own curve and timing — let opacity ease while position springs — right down to a single axis like X or width.

Easing

Easing shapes the pace of the motion with a curve. The Editor tab's type toggle picks the kind of motion — None, Easing, or Spring — and Easing gives you a custom cubic-bezier curve.

None turns animation off for the property — it snaps instantly to the new state with no in-between. Easing and Spring give you the two ways to shape that in-between.

Drag the two control points of the cubic-bezier to dial in exactly the feel you want. Preview plays it on the selected object before you commit with Apply, and your recent curves are saved for reuse.

The Motion panel's Easing editor: a cubic-bezier curve with two draggable control points, x1/y1/x2/y2 fields, duration and delay, and Preview and Apply buttons.
The easing editor — drag the two control points to shape the curve, or type exact bezier values. The copy and paste buttons (top right) reuse a tween elsewhere.

Motion templates

Switch to the Templates tab for a searchable library of named presets, grouped by feel — so you can reach for a motion without drawing a curve:

  • Basic
  • Smooth
  • Expressive
  • Snappy
  • Bouncy

Tip Tweens you use often collect under Recent — right-click one to keep it as a favorite.

Spring

Prefer physical motion? Spring replaces the curve with a simulated spring that settles naturally. Three parameters shape it.

The Motion panel on the Spring tab: a spring response curve plus Stiffness (180), Damping (14), and Mass (1) sliders, with Preview and Apply.
Spring motion is set by three values — stiffness, damping, and mass. The curve previews how it overshoots and settles.
Stiffness
How strong the spring is. Higher values snap faster.
Damping
How quickly motion settles. Lower values bounce more before resting.
Mass
The weight of the object. Heavier feels slower and more sluggish.

Tip Tune in the panel, hit Preview to play the transition both ways before committing, then Apply to keep it — or Revert to discard.

Reuse a transition

Dialed in an easing curve or a spring you like? The Motion panel's copy and paste buttons lift the current tween and drop it onto the same property of another object or scene — so a feel you've tuned once carries across your whole story.

Tip Paste targets the property you're editing, so a tween tuned on opacity can be reused on opacity across several selected objects at once.

What can animate

Transitions can move almost any visual property of an object between scenes.

  • Position
  • Scale
  • Rotation
  • Skew
  • Size
  • Opacity
  • Fills & effects

Object animation Coming soon

Coming soon

Object animation is coming soon. Today, motion is driven by scene-to-scene transitions; per-object timelines and keyframes are in active development.

Transitions cover most motion by animating between two scenes. Object animation will add a true timeline — keyframing individual properties on a single object, independent of scene changes — for moments where you want fine, frame-level control.

Timeline A per-object track to place and time keyframes directly, scrubbing playback like a video editor.
Keyframes Pin a property to a value at a point in time; SSHOW interpolates the frames between them.
Per-keyframe easing The same easing and spring curves you use on transitions, applied to each keyframe segment.