Animation

{
  "type": "object",
  "properties": {
    "delay": {
      "default": 0,
      "description": "Time in milliseconds, measured on the element's page, not on the whole design. On 'enter': how long after the page starts the element appears. It is hidden until then. On 'exit': how long before the page ends the element disappears. The exit finishes at that moment, and the element stays hidden after it. On 'loop': how long after the page starts the first cycle begins. It does not wait for the entrance, so a loop can be mid-cycle when the element appears. Until then the element is at rest. kenBurns ignores it, and letterWave also waits for an entrance that is a text preset to finish.",
      "type": "number"
    },
    "duration": {
      "default": 500,
      "description": "Time in milliseconds. On 'enter': how long the entrance plays, from its `delay`. On 'exit': how long the exit plays, up to the moment the element disappears. If the two together are longer than the element's time on the page, both play faster by the same factor to fit. On 'loop': the length of one cycle. Cycles repeat until the element disappears or the page ends. kenBurns ignores it and plays once across the element's whole time on the page. The default suits a transition of the whole element. Picking a preset in the editor sets a longer one: 1000 for lineRise, wordRise, wordFade, letterPop, wordBlur, lineWipe and linePeek, 50 per letter from 1000 to 4000 for typewriter, 4000 for rotate, 2500 for float, 2000 for letterWave and glow, 1500 for blink and pulse, and 1000 for shake.",
      "type": "number"
    },
    "enabled": {
      "default": true,
      "description": "Whether the animation plays. A disabled 'enter' or 'exit' also loses its `delay`, so the element is on the page from its start or to its end. To time an element with no transition, keep it enabled with the name 'none'.",
      "type": "boolean"
    },
    "type": {
      "type": "string",
      "enum": [
        "enter",
        "exit",
        "loop"
      ],
      "description": "Animation phase: 'enter' brings the element onto the page, 'exit' takes it off, and 'loop' repeats while it is there, also during the entrance and the exit."
    },
    "name": {
      "default": "none",
      "description": "Preset to play. Which names are valid depends on `type`. On 'enter' and 'exit': 'none' | 'fade' | 'move' | 'zoom' | 'pop' | 'rise' | 'flip' | 'growTurn' | 'wipe' | 'blur' | 'count' | 'typewriter' | 'lineRise' | 'wordRise' | 'wordFade' | 'letterPop' | 'wordBlur' | 'lineWipe' | 'linePeek'. On 'loop': 'none' | 'rotate' | 'blink' | 'bounce' | 'pulse' | 'float' | 'shake' | 'glow' | 'kenBurns' | 'letterWave'. Use a name only on its own type: a fade on 'loop' plays once and leaves the element hidden. An unknown name passes validation, logs a console error and does not animate. none is a hard cut: the element still appears or disappears at its `delay`, with no transition, and `duration` is ignored. As entrances: fade fades in, move slides in along a straight line, zoom scales into place, pop grows into place and fades in over its first third, rise moves up into place while fading in, flip turns half round about its vertical center line from its mirrored back, growTurn turns into place from half size while fading in, wipe shows the element behind a travelling edge, blur comes into focus while fading in, and count counts the first number in the text up to its value, keeping the style of the text and the format of the number, such as its thousands separator. An exit plays the same preset backwards, except that move, rise, growTurn and wipe carry on the way they were going. Presets that scale keep the center of the element in place. The text presets play on each unit of the text in turn, and `duration` covers them all: typewriter shows letters, letterPop pops letters, wordRise, wordFade and wordBlur play rise, fade and blur on words, lineRise and lineWipe play rise and wipe on lines, and linePeek slides each line into place behind a wipe's edge, clipped to the line's own row. An exit runs from the last unit back to the first, and a linePeek line carries on the way it came. As loops: rotate turns clockwise once per cycle, blink fades out and back, pulse grows a little and back, float lifts and settles, shake swings side to side and dies out within the cycle, glow swells and fades a halo around the element, letterWave bobs each letter in turn, and kenBurns zooms, and can pan, inside the frame of the element. bounce shrinks and grows back: the editor no longer offers it, so prefer pulse. Element limits: count, the text presets and letterWave are for 'text' elements. count plays nothing without a number in the text. Curved text or any other element plays a text preset whole, as its base preset: typewriter and wordFade as fade, lineRise and wordRise as rise, letterPop as pop, wordBlur as blur, lineWipe and linePeek as wipe and letterWave as float. blur blurs only 'text', 'image', 'svg', 'video' and 'gif', and any other element only fades. glow plays nothing on 'table' and 'group'. kenBurns plays on the crop, so only on 'image', 'svg', 'video' and 'gif'. Every other preset plays on every element, groups included.",
      "type": "string"
    },
    "data": {
      "default": {},
      "description": "Object of options for the preset in `name`. Every option is optional, and a preset not listed here takes none. `strength` is always a multiplier, default 1, and the editor offers 0.1 to 3. move: `direction` 'right' | 'left' | 'up' | 'down' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left', default 'right', the way the element travels on both 'enter' and 'exit'. `strength` 1 travels 20% of the shorter side of the page: it covers that distance, not the way to the edge of the page. zoom: `direction` 'in' | 'out', default 'in'. 'in' starts smaller and grows into place, 'out' starts larger and shrinks into place, and any other value plays as 'out'. `strength` 1 starts 25% away from full size. pop: `strength` 1 starts from nothing, and 0.5 from half size. rise: `strength` 1 travels 5% of the shorter side of the page. growTurn: `strength` 1 turns 180 degrees. wipe: `direction` 'right' | 'left' | 'up' | 'down', default 'right', the way its edge travels. lineWipe: `direction` as wipe; without one, each line wipes in its own reading direction. linePeek: `direction` 'right' | 'left' | 'up' | 'down', default 'up', the way each line travels. blur: `strength` 1 adds 20 to `blurRadius` at its most blurred. count: `from`, a number, default 0, where the count starts on 'enter' and ends on 'exit'. bounce: `strength` 1 shrinks to a third of the size, and 0.5 to half. pulse: `strength` 1 grows 8%. float: `strength` 1 lifts 2% of the shorter side of the page. shake: `strength` 1 swings 1.5% of the shorter side of the page. letterWave: `strength` 1 lifts each letter 0.3 of its font size. glow: `strength` 1 spreads 2% of the shorter side of the page. It has no color option: it uses the element's `shadowColor` when `shadowEnabled` is true or `shadowColor` is not 'black', else its `fill` (`color` on a line), else black. So a `shadowColor` with `shadowEnabled` false glows in that color and shows no shadow at rest. kenBurns: `zoom` 'in' | 'out', default 'in'. 'in' narrows the saved crop, and 'out' widens to it. `direction` 'none' | 'right' | 'left' | 'up' | 'down', default 'none', the way the view pans. `strength` 1 narrows the crop by 15%. A design below `schemaVersion` 5, or with none, has its move `strength` rescaled on load to keep the fixed 200px those versions travelled."
    },
    "easing": {
      "description": "Timing curve: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'backIn' | 'backOut' | 'backInOut'. Missing (or unknown) plays linear. Setting a preset in the editor writes its recommended curve: fade, move, zoom, blur, count, rise, flip, growTurn and wipe ease out on enter and ease in on exit, pop overshoots (backOut on enter, backIn on exit), blink and bounce ease in and out on each sweep, kenBurns eases in and out across the element's time, a text preset eases each of its letters, words or lines as the preset it plays, and every other animation is linear.",
      "type": "string"
    }
  },
  "required": [
    "type"
  ]
}