Manual
Overview
Language
IntroductionScenes & structureText & inlineGraphsCode panesAnimationDataReuse & logicExpressions & parameters
Elements
Text
ParagraphHeading 1Heading 2Heading 3Heading 4Unordered ListDivider
Media
ImageTableEquation
Callouts
NoteDefinitionExampleTask
Graph
GraphLinePolygonCurveIntegralScatterHistogramPointSegmentVectorCircleSquareRectangleTriangleStarDiamondHexagonTextAxis labelAxis BraceFitResidualsContourHeatmapParameter
Code
Code canvasLines
Animation
CueDraw cueTrace cueHighlight cueSpotlight cueType cue
Structure
SceneStep
Reference
Internote Reference
Inline
Formatting
BoldItalicsInline CodeHighlightLink
Text colour
Red textOrange textYellow textGreen textTeal textBlue textPurple textPink textGrey text
Maths
Maths
Reference
Internote ReferenceValueConstant
Other
FootnoteIcon
Directives
DatasetIncludeConstantsTemplatePresetConditionalForIgnore
Keyframes
KeyframeZoom keyframe
Attribute types
?
  1. Keyframes
  2. Keyframe

Keyframe

!cue.toKeyframe

A keyframe written inside an animatable attribute’s value. The attribute’s own value is the base state; each `!cue.to` names the value to move to and anchors the move in scene time — `x-domain: [0, 5] !cue.to{[0, 10]}(at: 2)` widens the window at step 2. Keyframes chain left to right on one attribute, and a chain may mix `!cue.to` with `!cue.zoom`.

Attributes

atRequired
cue-anchor
When the move starts: a step index (at: 2), an absolute scene time (at: 1500ms), or a compound offset (at: 2 + 500ms).
over
duration
How long the transition takes.
Default1500
easing
easing-function
The transition’s timing curve.
Defaultsmooth

Allowed content

Body { }The target value — whatever the attribute itself would accept

Examples

zoom: 5 !cue.to{6.5}(at: 2) !cue.to{8}(at: 4 + 1.5s; over: 800ms)
y: 0 !cue.to{4}(at: 1; easing: linear)
On this page
AttributesExamples
Keyframe · Internote