Skip to main content

Animation

Animation basics​

An animation describes how an object's properties change. A slide's animations array divides those changes into builds: each press of the right arrow or spacebar advances one build.

Create an animation with Animate(object, newProperties, options?).

import { Animate, Rectangle, Slide } from "presenter";
const square = Rectangle({  x: 800,  /* ... additional properties ... */});
const slide = Slide({  objects: [square],  animations: [    Animate(square, { x: 3000 })  ],});

In the demonstration above, use the arrow buttons to move between builds. In a full-screen presentation, press space or the right arrow to advance and press the left arrow to go back.

Sequential and parallel builds​

Separate entries in the animations array are separate builds. They play one at a time as the presentation advances.

An array nested inside animations represents a single build containing multiple unit animations. Those unit animations are triggered together as part of the same build.

import { Animate, Color, Slide } from "presenter";
/* ... object definitions ... */
const slide = Slide({  objects: [square , circle],  animations: [    Animate(square, { x: 3000 }),    Animate(square, { fillColor: Color.BLUE }),    Animate(square, { x: 800, fillColor: Color.GREEN }),    [      Animate(square, { opacity: 0 }),      Animate(circle, { opacity: 1 })    ],  ],});

Animation timing​

Animate can optionally accept a third argument with parameters describing how the animation should behave, including its duration and an optional delay before the animation begins. For example:

import { Animate } from "presenter";

Animate(object, { x: 2400 }, { duration: 600, delay: 200, block: true });
  • duration controls how long the change takes in milliseconds. Animate defaults to 1000 ms.
  • delay waits a certain number of milliseconds before the animation starts.
  • block is a boolean value that makes later animations in the same parallel build wait to begin until this animation is complete.

Animations in separate top-level builds already wait for the presenter to advance, so block is most useful inside a nested array:

const slide = Slide({  objects: [first, second, third],  animations: [    [      Animate(first, { x: 2720 }, {        duration: 500,        block: true,      }),      Animate(second, { x: 2720 }, {        duration: 500,        block: true,      }),      Animate(third, { x: 2720 }, {        duration: 500,      }),    ],  ],});

Pause(milliseconds) can also be used to prevent all subsequent animations in a parallel build from starting until the pause is complete. Use Pause for a simple shared gap; use delay when not all animations should wait the same amount of time. Import Pause into your slide with:

import { Pause } from "presenter";

Easing and interpolation​

During an animation, Presenter.js interpolates between the old and new values: it calculates the intermediate value to render at each moment in time. Linear interpolation moves through that range at a constant rate.

An easing function customizes how values are interpolated. For example, Easing.CUBIC starts gently, moves fastest in the middle, and slows into the final value; this often produces a more natural-feeling animation compared to a linear interpolation:

import { Animate, Easing, Slide } from "presenter";
const slide = Slide({  objects: [circle1, circle2, label1, label2],  animations: [    Animate(circle1, { x: 3340 }),    Animate(circle2, { x: 3340 }, { easing: Easing.CUBIC }),    Animate(circle1, { x: 500 }),    Animate(circle2, { x: 500 }, { easing: Easing.CUBIC }),  ],});

Presenter.js also includes Easing.LINEAR, Easing.CUBIC_IN, Easing.CUBIC_OUT, and Easing.BACK_IN_OUT. You can also provide your own custom easing function that accepts a time value from 0 to 1 and returns a corresponding progress value from 0 to 1.

Animation presets​

Presenter.js offers concise helper functions for common types of object transitions:

  • Update(object, properties) changes properties immediately, without animation.
  • Pause(duration) inserts time before later units in the same build.
  • Show(object) and Hide(object) immediately set opacity to 1 or 0.
  • FadeIn(object) and FadeOut(object) animate setting opacity to 1 or 0.
import { Color, FadeIn, FadeOut, Hide, Pause, Show, Slide, Update } from "presenter";
const slide = Slide({  objects: [card, circle],  animations: [    Show(card),    Update(card, { fillColor: Color("#3b82f6") }),    [      FadeOut(card, { duration: 350, block: true }),      Pause(250),      FadeIn(circle, 450),    ],    [      Hide(circle),      Show(card),    ],  ],});