Animation

A scene's timeline belongs to the host. An environment reacts to it; it never runs a clock of its own.

• StepController tracks which step the scene is on and when it was entered. Every environment in a scene animates against the same one, though none is handed it.
• EnvironmentAnimationRuntime is one environment's engine: which of its elements are showing, where each keyframe track is, and which handlers to call. A surface reaches it as ctx.animation.

Only a step entered forwards animates. Going back cuts to the landing step's finished state, and a jump forwards lands every skipped step finished and plays only the step it lands on. The runtime already reads this way, so presence, keyframe values and anchor windows follow it with no work from the environment.

An attribute declared animatable can be animated with !cue.to. Read its value at this moment, mid-animation included, with ctx.animation.attrValue(name).

Motion an environment derives for itself, such as a layout or a camera fit, goes through the SDK rather than a loop of its own:

• useGlide blends from the state just before the live step's latest change to the state now, on the scene clock. The environment gives a pure function from a runtime read at a moment (ctx.animation.at(sceneMs)) to its state.
• useFollowGlide glides what the reader moves, such as a slider's slice, and snaps on any step change.
• cuePresentation gives a cue's group its classes and timing, which the SDK's stylesheet fades and draws. An element that draws itself on the scene clock opts out with data-cnv-self-drawn.

requestAnimationFrame, performance.now and CSS animations have no place in an environment. checkEnvironmentMotion, from @internote/canvas-sdk/testing, drives an environment forwards, back and by a jump, and checks that only the live step animates.

An environment takes part in the timeline through its animation handlers:

• onStep is called on every step change.
• A VerbHandler is called when an element of the environment's vocabulary enters or leaves at its cue.

InterpolationRegistry holds how each kind of value blends between keyframes. An environment that invents a value shape supplies an Interpolator for it in its definition's interpolations.