Skip to content

Transitions reference

Transition types live in the inkflow.transitions namespace. Each takes the shared Transition params (duration, easing) plus any of its own. direction fields use the Direction enum.

from inkflow import transitions, Direction

Slide("01.svg", transition=transitions.Push(direction=Direction.RIGHT))

Built-in transition types for the deck DSL.

Each type is a thin subclass of Transition, adding only its own fields. The shared params (duration, easing) come from the base.

How a type maps to the JS handler:

  • The handler key is the kebab-cased class name (Transition.slug()): SomeTransition"some-transition"
  • Every set (non-None) field is serialized into the transition JSON, so direction, color etc. arrive on the JS TransitionData object automatically without per-type pipeline code required.
  • Register a custom handler from user JS: window.inkflow.registerTransition(name, fn).

Cut dataclass

Bases: Transition

Instant slide switch with no animation.

duration class-attribute instance-attribute

duration: float = 0.0

Duration in seconds. Fixed at 0.0 (instant).

Crossfade dataclass

Bases: Transition

Dissolve the outgoing slide into the incoming one.

Morph dataclass

Bases: Transition

Interpolate matching SVG elements by ID between slides.

Elements sharing an id across the two slides tween position, size, and rotation to their new pose, plus fill/stroke color and opacity. Any leaf shape morphs — rects, circles, lines, paths, images, text — and text keeps its glyphs undistorted by tweening font size rather than a box scale.

id a group to morph everything inside it as independently matched leaves; id a single element to morph just that one. Elements with no matching id on the other slide crossfade instead: present only in the outgoing slide, they fade out; present only in the incoming slide, they fade in.

Push dataclass

Bases: Transition

Both slides move — outgoing exits, incoming enters from the opposite edge.

direction class-attribute instance-attribute

direction: Direction = Direction.LEFT

Edge the incoming slide enters from.

easing class-attribute instance-attribute

easing: Easing = field(
    default=Easing.EASE_IN_OUT, kw_only=True
)

Easing curve.

Cover dataclass

Bases: Transition

Incoming slide covers the outgoing one, which stays in place.

direction class-attribute instance-attribute

direction: Direction = Direction.LEFT

Edge the incoming slide enters from.

easing class-attribute instance-attribute

easing: Easing = field(
    default=Easing.EASE_IN_OUT, kw_only=True
)

Easing curve.

Zoom dataclass

Bases: Transition

Outgoing slide scales out while the incoming one scales in.

amount is how far the slides scale past their normal size: 0.6 zooms the incoming slide in from 0.4x and the outgoing slide out to 1.6x.

amount class-attribute instance-attribute

amount: float = 0.6

How far the slides scale past their normal size.

easing class-attribute instance-attribute

easing: Easing = field(
    default=Easing.EASE_IN_OUT, kw_only=True
)

Easing curve.

Fade dataclass

Bases: Transition

Outgoing fades to a solid colour, then the incoming fades in from it.

color class-attribute instance-attribute

color: str = '#000000'

The intermediate solid color faded through.

Wipe dataclass

Bases: Transition

Incoming slide is progressively revealed from one edge.

direction class-attribute instance-attribute

direction: Direction = Direction.LEFT

Edge the reveal starts from.

easing class-attribute instance-attribute

easing: Easing = field(
    default=Easing.EASE_IN_OUT, kw_only=True
)

Easing curve.

Transition (base)

Bases: _Slugged

Data-only base for every transition type.

Concrete types live in inkflow.transitions and subclass this. Every field is serialized into the transition JSON, so direction, color etc. arrive on the JS TransitionData object automatically.

Custom transitions. Subclass this in deck.py; the type name becomes the JS handler key via camel_to_kebab (MyWarp"my-warp"). Register the matching handler from a scripts.js next to deck.py with window.inkflow.registerProgressTransition(name, render) (or the lower-level registerTransition).

duration class-attribute instance-attribute

duration: float = 0.5

Duration in seconds. Defaults to 0.5; Cut overrides it to 0.0.

easing class-attribute instance-attribute

easing: Easing = field(default=Easing.EASE, kw_only=True)

Easing curve — an Easing preset or a custom curve via Easing.cubic_bezier(...).