CorvidReference

wix-animations

The wix-animations module contains functionality for working with animations.

Animation sequences are composed using a timeline. A timeline defines what animations are played on which page elements and when those animations are played.

Typical Animation Process

The following list outlines the typical process of creating and playing an animation timeline:

  • Create a new timeline using the timeline() function.
  • Add animation attributes and sequence them within the timeline using the add() function.
  • Control the playing of the timeline using the play(), reverse(), pause(), and replay() functions.

To use the Animations API, import wixAnimations from the wix-animations module:

   import wixAnimations from 'wix-animations';

Table of Contents

FUNCTIONS

?
Perform actions on an object.
timeline( )Creates a new animation timeline.

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
TimeLineOptionsAn object containing options for creating a timeline.

timeline( )

Creates a new animation timeline.

Description

A timeline is used to compose animations together over time. You can synchronize multiple animations on matched elements, control them as a whole, and precisely manage their timing.

Typically, after creating a new timeline, you add animation attributes and sequence them within the timeline using the add() function. Then, control the playing of the timeline using the play(), reverse(), pause(), and replay() functions.

Use the timelineOptions parameter to specify whether the timeline repeats and how the repetitions are played.

Syntax

function timeline([timelineOptions: TimeLineOptions]): TimeLine
PARAMETERS
?
Values that you pass to a function.
timelineOptions(Optional)

Options to apply to the timeline.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The newly created timeline.

Examples

Create a timeline

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline();

Create a timeline that repeats

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline({"repeat": 3});

Create a timeline with options

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

Create a timeline, add animation attributes, and add buttons for controlling timeline playback

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

$w.onReady( function () {
  const myImage = $w("#myImage");

  timeline
    .add( myImage, {
      "rotate": 360,
      "scale": .5,
      "duration": 1000
    } )
    .add( myImage, {
      "opacity": 0,
      "duration": 1000
    } );

  $w("#playButton").onClick( () => {
    timeline.play();
  } );

  $w("#reverseButton").onClick( () => {
    timeline.reverse();
  } );

  $w("#pauseButton").onClick( () => {
    timeline.pause();
  } );

  $w("#replayButton").onClick( () => {
    timeline.replay();
  } );
} );

TimeLineOptions

An object containing options for creating a timeline.

See Also

timeline( )

Syntax

type TimeLineOptions = {
  repeat: number
  repeatDelay: number
  yoyo: boolean
}
MEMBERS
?
The properties of an object.
repeat(Optional)
number

Number of times the timeline repeats after it finishes playing all the animations in the timeline once.

For example, if repeat is 2, the timeline plays a total of 3 times, the initial play plus 2 repetitions.

Pass a repeat value of -1 to repeat infinitely.

Defaults to 0, meaning the timeline plays only once.

repeatDelay(Optional)
number

Number of milliseconds to wait between repetitions.

For example, if repeat is 2 and repeatDelay is 1000, the timeline plays the initial play, then waits for 1 second before it plays again, and then waits 1 second again before the final play.

Defaults to 0, meaning the each repetition plays immediately after the one that preceded it.

yoyo(Optional)
boolean

Whether to reverse the animation play for each successive repetition.

For example, if repeat is 2 and the timeline contains the animations A, B, and C to be played one after the other, the animations will play in the following order:

  • If yoyo is false:

    A -> B -> C -> A -> B -> C -> A -> B -> C

  • If yoyo is true:

    A -> B -> C -> C -> B -> A -> A -> B -> C

Defaults to false.

Examples

Create a timeline that repeats

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline({"repeat": 3});

Create a timeline with options

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

Create a timeline, add animation attributes, and add buttons for controlling timeline playback

import wixAnimations from 'wix-animations';

let timeline = wixAnimations.timeline(
  {
    "repeat": 3,
    "repeatDelay": 100,
    "yoyo": true
  }
);

$w.onReady( function () {
  const myImage = $w("#myImage");

  timeline
    .add( myImage, {
      "rotate": 360,
      "scale": .5,
      "duration": 1000
    } )
    .add( myImage, {
      "opacity": 0,
      "duration": 1000
    } );

  $w("#playButton").onClick( () => {
    timeline.play();
  } );

  $w("#reverseButton").onClick( () => {
    timeline.reverse();
  } );

  $w("#pauseButton").onClick( () => {
    timeline.pause();
  } );

  $w("#replayButton").onClick( () => {
    timeline.replay();
  } );
} );