Skip to content

Animations reference

Animation types live in the inkflow.animations namespace. Each takes the shared Animation params (element, step, duration, easing, delay) plus any of its own. direction fields use the Direction enum and easing the Easing type.

from inkflow import animations, Direction

Slide("01.svg", animations=[
    animations.FadeIn("#headline", step=1),
    animations.SlideIn("#box", step=2, direction=Direction.LEFT, duration=0.6),
])

Built-in animation types for the deck DSL.

Each type is a thin subclass of Animation, adding only its own fields. The shared params (duration, easing, delay) and the element/step fields come from the base.

How a type maps to CSS:

  • The CSS class is anim-<slug>, where the 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 CSS rule," nothing else.
  • Continuous params become --anim-<field> custom properties on the element.
  • Discrete params that CSS cannot branch on by value become modifier classes — currently direction → anim-from-{direction}.

FadeIn dataclass

Bases: Animation

Element starts hidden, fades in on its step.

FadeOut dataclass

Bases: Animation

Element starts visible, fades out on its step.

Bounce dataclass

Bases: Animation

Element starts hidden, appears with a scale-pulse bounce on its step.

duration class-attribute instance-attribute 

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

Duration in seconds.

overshoot class-attribute instance-attribute 

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

Easing for the translate axis — the overshoot that gives the bounce its spring. Independent of the opacity-axis easing.

SlideIn dataclass

Bases: Animation

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.

SlideOut dataclass

Bases: Animation

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.

ZoomIn dataclass

Bases: Animation

Element scales up into place from scale.

scale class-attribute instance-attribute 

scale: float = 0.8

Starting scale, e.g. 0.6.

ZoomOut dataclass

Bases: Animation

Element scales down out of place toward scale.

scale class-attribute instance-attribute 

scale: float = 0.8

Ending scale.

Highlight dataclass

Bases: Animation

Pulse the element passes times without hiding it.

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).

passes class-attribute instance-attribute 

passes: int = 1

Number of pulses.

Animation (base)

Bases: _Slugged

Data-only base for every animation type.

Concrete types live in inkflow.animations and subclass this, adding only their own fields. The shared timing params are kw_only so they stay out of the positional argument order, leaving the natural positional slots to each subclass's own fields (e.g. SlideIn("#box", Direction.RIGHT) sets direction).

Custom animations. Subclass this directly in deck.py — no changes to inkflow are needed. The CSS class is the kebab-cased type name (MyGlow → anim-my-glow), and each extra field becomes a --anim-<field> custom property on the element. Put the matching CSS in a styles.css next to deck.py (loaded automatically).

@dataclass
class MyGlow(Animation):
    intensity: float = 1.0   # → --anim-intensity on the element

element instance-attribute 

element: str

CSS ID selector of the target element, e.g. "#headline".

step class-attribute instance-attribute 

step: int = 1

The keypress on which the animation plays.

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.