Skip to content

Animations reference

Animation types live in the inkflow.animations namespace. Each takes the shared Cue params (element, trigger) plus the Animation timing/playback params (duration, easing, delay, iterations) and any of its own. element is the target's id; trigger is a Trigger that decides the cue's step. direction fields use the Direction enum and easing the Easing type.

from inkflow import animations, Direction, Trigger

Slide(
    "01.svg",
    animations=[
        animations.FadeIn("headline"),
        animations.SlideIn(
            "box", Trigger.WITH_PREVIOUS, direction=Direction.LEFT, duration=0.6
        ),
    ],
)

Every built-in subclasses one of the semantic bases Enter, Exit, or Emphasis, which fix its AnimationKind. The kind lets several cues target one element and compose into a single lifecycle: an element can enter, be emphasized, and exit at different steps, and re-enter after an exit. Enters reveal, exits hide, and emphasis fires momentarily without changing visibility.

Custom animations subclass a semantic base and write a matching @keyframes anim-<slug> rule (the kebab-cased type name) in a styles.css next to deck.py. No JavaScript is involved: the step engine reads the keyframes and drives them. Any extra field is substituted wherever it appears as var(--anim-<field>).

from dataclasses import dataclass
from inkflow import animations


@dataclass
class Glow(animations.Emphasis):
    intensity: float = 1.0  # → var(--anim-intensity) in @keyframes anim-glow

The animations namespace also holds PlayVideo, a non-animating cue that starts a Video on a step.

Built-in animation types for the deck DSL.

The base Animation (element + trigger from Cue, plus duration/easing/ delay) lives here alongside the three semantic bases Enter, Exit, and Emphasis, which fix the animation's AnimationKind. Concrete types are thin subclasses of those bases, adding only their own fields. This namespace also holds PlayVideo, the non-animating video cue that shares the same step timeline.

How a type maps to CSS:

  • The step engine drives each cue via the Web Animations API, reading the @keyframes anim-<slug> rule whose slug is the kebab-cased class name (Animation.slug()): FadeIn → anim-fade-in, SlideIn → anim-slide-in, Highlight → anim-highlight. Defining a new type is "add a subclass here + write a matching @keyframes rule," nothing else.
  • Every field becomes part of the cue's serialized params. Timing fields (duration/easing/delay) drive the element.animate() options; the rest are substituted into the keyframes wherever they appear as a var(--anim-<field>) token (e.g. var(--anim-distance)), leaving other custom properties like var(--accent) for the browser to resolve.
  • kind decides how several cues on one element compose: enters reveal, exits hide, emphasis fires momentarily without changing visibility.

Cue dataclass

Base for anything on a slide's step timeline.

Carries just the target element and the trigger that decides its step. Animation adds timing on top; PlayVideo is a sibling that carries no timing.

element instance-attribute 

element: str

Id of the target element, e.g. "headline".

trigger class-attribute instance-attribute 

trigger: Trigger = Trigger.ON_CLICK

When the cue fires. Defaults to Trigger.ON_CLICK.

Animation dataclass

Bases: Cue, Slugged

Base for every animation type.

Concrete types subclass one of Enter / Exit / Emphasis (which fix the AnimationKind), adding their own fields. element/trigger come from Cue; duration, easing, and delay are shared keyword-only timing params.

Custom animations. Subclass a semantic base in deck.py — no changes to inkflow are needed. Write a matching @keyframes rule named after the kebab-cased type (MyGlow → @keyframes anim-my-glow) in a styles.css next to deck.py (loaded automatically). Any extra field is substituted into the keyframes wherever it appears as var(--anim-<field>).

from inkflow import animations

@dataclass
class MyGlow(animations.Emphasis):
    intensity: float = 1.0   # → var(--anim-intensity) in @keyframes anim-my-glow

kind class-attribute 

kind: AnimationKind = AnimationKind.ENTER

The animation's lifecycle role. Overridden by the semantic base classes; a bare Animation subclass defaults to an enter.

duration class-attribute instance-attribute 

duration: float = field(default=0.4, kw_only=True)

Duration in seconds.

easing class-attribute instance-attribute 

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

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

delay class-attribute instance-attribute 

delay: float = field(default=0.0, kw_only=True)

Seconds to wait before the animation starts.

iterations class-attribute instance-attribute 

iterations: int = field(default=1, kw_only=True)

How many times the animation repeats. Mostly useful for an emphasis like Highlight (pulse iterations times); enters/exits normally leave it at 1.

Enter dataclass

Bases: Animation

Base for animations that reveal an element (hidden until their step).

Exit dataclass

Bases: Animation

Base for animations that hide an element (shown until their step).

Emphasis dataclass

Bases: Animation

Base for momentary accents that leave the element's visibility unchanged.

PlayVideo dataclass

Bases: Cue

Start a video on a step instead of on load.

element is the zone key of a Video, e.g. "media" for zones={"media": Video(...)}. At its step the clip plays; stepping back resets it.

Slide(
    "media",
    zones={"media": Video("demo.mp4")},
    animations=[animations.PlayVideo("media")],
)

If the video also sets autoplay=True, the cue wins and autoplay is dropped.

FadeIn dataclass

Bases: Enter

Element starts hidden, fades in on its step.

Bounce dataclass

Bases: Enter

Element starts hidden just below its place and springs up into it on its step.

duration class-attribute instance-attribute 

duration: float = field(default=0.35, kw_only=True)

Duration in seconds.

easing class-attribute instance-attribute 

easing: Easing = field(
    default=Easing.cubic_bezier(0.34, 1.56, 0.64, 1),
    kw_only=True,
)

Easing curve — defaults to a spring that overshoots past the resting position and settles back, which is what gives the bounce its character.

distance class-attribute instance-attribute 

distance: float = 14.0

How far below its resting place the element starts, in SVG user units.

SlideIn dataclass

Bases: Enter

Element slides in from an edge, fading as it arrives.

direction class-attribute instance-attribute 

direction: Direction = Direction.LEFT

Edge the element slides in from.

distance class-attribute instance-attribute 

distance: float = 60.0

Travel distance in SVG user units.

ZoomIn dataclass

Bases: Enter

Element scales up into place from scale.

scale class-attribute instance-attribute 

scale: float = 0.8

Starting scale, e.g. 0.6.

FadeOut dataclass

Bases: Exit

Element starts visible, fades out on its step.

SlideOut dataclass

Bases: Exit

Element slides out toward an edge, fading as it leaves.

direction class-attribute instance-attribute 

direction: Direction = Direction.LEFT

Edge the element slides out toward.

distance class-attribute instance-attribute 

distance: float = 60.0

Travel distance in SVG user units.

ZoomOut dataclass

Bases: Exit

Element scales down out of place toward scale.

scale class-attribute instance-attribute 

scale: float = 0.8

Ending scale.

Highlight dataclass

Bases: Emphasis

Pulse the element iterations times without hiding it.

iterations (the number of pulses) is the shared Animation field; duration is the length of one pulse.

duration class-attribute instance-attribute 

duration: float = field(default=0.6, kw_only=True)

Duration of one pulse in seconds.

color class-attribute instance-attribute 

color: str = 'var(--accent)'

Glow color (any CSS color or theme token).

Cue (base)

Base for anything on a slide's step timeline.

Carries just the target element and the trigger that decides its step. Animation adds timing on top; PlayVideo is a sibling that carries no timing.

element instance-attribute 

element: str

Id of the target element, e.g. "headline".

trigger class-attribute instance-attribute 

trigger: Trigger = Trigger.ON_CLICK

When the cue fires. Defaults to Trigger.ON_CLICK.

Animation (base)

Bases: Cue, Slugged

Base for every animation type.

Concrete types subclass one of Enter / Exit / Emphasis (which fix the AnimationKind), adding their own fields. element/trigger come from Cue; duration, easing, and delay are shared keyword-only timing params.

Custom animations. Subclass a semantic base in deck.py — no changes to inkflow are needed. Write a matching @keyframes rule named after the kebab-cased type (MyGlow → @keyframes anim-my-glow) in a styles.css next to deck.py (loaded automatically). Any extra field is substituted into the keyframes wherever it appears as var(--anim-<field>).

from inkflow import animations

@dataclass
class MyGlow(animations.Emphasis):
    intensity: float = 1.0   # → var(--anim-intensity) in @keyframes anim-my-glow

kind class-attribute 

kind: AnimationKind = AnimationKind.ENTER

The animation's lifecycle role. Overridden by the semantic base classes; a bare Animation subclass defaults to an enter.

duration class-attribute instance-attribute 

duration: float = field(default=0.4, kw_only=True)

Duration in seconds.

easing class-attribute instance-attribute 

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

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

delay class-attribute instance-attribute 

delay: float = field(default=0.0, kw_only=True)

Seconds to wait before the animation starts.

iterations class-attribute instance-attribute 

iterations: int = field(default=1, kw_only=True)

How many times the animation repeats. Mostly useful for an emphasis like Highlight (pulse iterations times); enters/exits normally leave it at 1.