Introduction

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 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.

Get hands-on experience with Animations on our Hello Animations example page.

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

Copy
import wixAnimationsFrontend from "wix-animations-frontend";
Did this help?

timeline( )


Creates a new animation timeline.

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.

Control the timeline playback using the play(), reverse(), pause(), and replay() functions.

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

Method Declaration
Copy
function timeline(timelineOptions: TimeLineOptions): TimeLine;
Method Parameters
timelineOptionsTimeLineOptions

Options to apply to the timeline.

Returns
Return Type:TimeLine
JavaScript
import wixAnimationsFrontend from "wix-animations-frontend"; let timeline = wixAnimationsFrontend.timeline();
Did this help?