Introduction

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.

Did this help?

add( )

Adds an animation to a timeline.

The add() function adds one or more animations on one or more page elements to a timeline. Any element that has animation capabilities such as hide() and show() can be added as an animation target in a timeline.

By default, when no offset is specified ,the animations in a timeline run in the order they are added. When multiple animations are added using a single call to the add function, those animations default to run together at the same time within the timeline.

You can override the default order that the animations run using the offset parameter.

You can add multiple add() functions to make more complex animations.

Method Declaration

Copy

function add(
  target: any,
  AnimationAttributes: AnimationAttributes | Array<AnimationAttributes>,
  offset: union,
): TimeLine;

Method Parameters

targetanyRequired

Page element or elements to animate that has animation capabilities such as hide() and show().

AnimationAttributesAnimationAttributes | Array<AnimationAttributes>

Attributes of the animation or animations to add to the timeline.

offsetunion

When the animation starts in the timeline. When no offset is specified, the animation added starts after the previous animation ends.

The offset can be relative to the last animation added or absolute within the whole timeline using this following formats:

A non-negative number specifying the absolute offset from the beginning of the timeline in milliseconds, regardless of the animation's position in the timeline.
A "+=" expression to specify a relative offset in milliseconds, where the animation starts the specified number of milliseconds after the previous animation in the timeline ends. For example, "+=1000" starts the current animation 1 second after the previous animation ends.
A "-=" expression to specify a relative offset in milliseconds, where the animation starts the specified number of milliseconds before the previous animation in the timeline ends. For example, "-=1000" starts the current animation 1 second before the previous animation ends.

If the specified relative offset is before the current start of the timeline, the timeline is lengthened and the beginning of the timeline is now the start of the new animation. When played, the timeline will begin playing from its original start.

For example, if a timeline is 1000 milliseconds long and you add an animation with an offset of -500, the timeline length will become 1500 milliseconds and the beginning of the timeline now be the start time of the newly added animation.

Returns

Return Type:TimeLine

Example shown:

Create a simple animation

You can test out the code in our example template.

JavaScript


import { timeline } from "wix-animations-frontend";

$w.onReady(() => {
  const revealTimeline = timeline()
    .add($w("#pink"), {
      duration: 1500,
      x: -160,
      scale: 1.3,
      easing: "easeOutBack",
    })
    .add(
      $w("#green"),
      { duration: 1500, x: 160, scale: 1.3, easing: "easeOutBack" },
      0,
    );

  $w("#container").onMouseIn(() => {
    revealTimeline.play();
  });

  $w("#container").onMouseOut(() => {
    revealTimeline.reverse();
  });
});

Did this help?

onComplete( )

Sets an event handler that runs when the timeline completes playing.

The event handler set by calling the onComplete() function runs when a timeline completes playing by reaching the end.

When a timeline has been set to repeat, the event handler runs at the end of the last repetition and does not run for the preceding repetitions.

If an event handler is already set for onComplete, setting a new event handler overrides the one set previously.

To remove an event handler you set previously, call the onComplete() function and pass null for the handler parameter.

Method Declaration

Copy

function onComplete(handler: Function): TimeLine;

Method Parameters

handlerFunctionRequired

The name of the function or the function expression to run when the timeline completes playing.

Returns

Return Type:TimeLine

Example shown:

Set an event handler that runs when a timeline completes playing forwards

JavaScript


import wixAnimationsFrontend from "wix-animations-frontend";

let timeline = wixAnimationsFrontend.timeline();

// ...

timeline.onComplete(() => {
  // handle timeline forwards completion
  console.log("Timeline has completed playing in reverse.");
});

Did this help?

onRepeat( )

Sets an event handler that runs when a the timeline repeats.

The event handler set by calling the onRepeat() function runs when a timeline begins playing a repetition. It does not run for the initial play of the timeline. However, when replaying a timeline that has already been played, the event handler runs even for the first repetition of the timeline.

If an event handler is already set for onRepeat, setting a new event handler overrides the one set previously.

To remove an event handler you set previously, call the onRepeat() function and pass null for the handler parameter.

Method Declaration

Copy

function onRepeat(handler: Function): TimeLine;

Method Parameters

handlerFunctionRequired

The name of the function or the function expression to run when the timeline repeats.

Returns

Return Type:TimeLine

Example shown:

Set an event handler that runs when a timeline repeats

JavaScript


import wixAnimationsFrontend from "wix-animations-frontend";

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

// ...

timeline.onRepeat(() => {
  // handle timeline repetition
  console.log("Timeline is repeating.");
});

Did this help?

onReverseComplete( )

Sets an event handler that runs when the timeline completes playing in the reverse direction.

The event handler set by calling the onReverseComplete() function runs when a timeline completes playing in reverse by reaching the beginning.

When a timeline has been set to repeat, the event handler runs at the end of the last repetition and does not run for the preceding repetitions.

If an event handler is already set for onReverseComplete, setting a new event handler overrides the one set previously.

To remove an event handler you set previously, call the onReverseComplete() function and pass null for the handler parameter.

Method Declaration

Copy

function onReverseComplete(handler: Function): TimeLine;

Method Parameters

handlerFunctionRequired

The name of the function or the function expression to run when the timeline completes playing.

Returns

Return Type:TimeLine

Example shown:

Set an event handler that runs when a timeline completes playing in reverse

JavaScript


import wixAnimationsFrontend from "wix-animations-frontend";

let timeline = wixAnimationsFrontend.timeline();

// ...

timeline.onReverseComplete(() => {
  // handle timeline reverse completion
  console.log("Timeline has completed playing in reverse.");
});

Did this help?

onStart( )

Sets an event handler that runs when the timeline starts playing.

The event handler set by calling the onStart() function runs when a timeline starts playing from the beginning.

This happens when:

The play() function is called on a timeline that has not been played yet.
The replay() function is called, regardless of the timeline state, since it replays the timeline from its beginning.

When a timeline has been set to repeat, the event handler runs at the beginning of the first repetition and does not run for each successive repetition. To set an event handler that runs when a timeline repeats, use the onRepeat() function.

If an event handler is already set for onStart, setting a new event handler overrides the one set previously.

To remove an event handler you set previously, call the onStart() function and pass null for the handler parameter.

Method Declaration

Copy

function onStart(handler: Function): TimeLine;

Method Parameters

handlerFunctionRequired

The name of the function or the function expression to run when the timeline starts playing.

Returns

Return Type:TimeLine

Example shown:

Set an event handler that runs when a timeline starts

JavaScript


import wixAnimationsFrontend from "wix-animations-frontend";

let timeline = wixAnimationsFrontend.timeline();

// ...

timeline.onStart(() => {
  // handle timeline start
  console.log("Timeline has started.");
});

Did this help?

pause( )

Pauses a timeline.

Pauses a running timeline.

Note that when a timeline is created it is paused by default at the beginning of the timeline.

Method Declaration

Copy

function pause(): TimeLine;

Request

This method does not take any parameters

Returns

Return Type:TimeLine

Example shown:

Pause a timeline

JavaScript


import wixAnimationsFrontend from "wix-animations-frontend";

let timeline = wixAnimationsFrontend.timeline();

// ...

timeline.pause();

Did this help?