Animation sequences are composed using a timeline. A timeline defines what animations are played on which page elements and when those animations are played.
The following outlines the typical process of creating and playing an animation timeline:
timeline()
function.add()
function.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:
import wixAnimationsFrontend from "wix-animations-frontend";
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.
function timeline(timelineOptions: TimeLineOptions): TimeLine;
Options to apply to the timeline.
import wixAnimationsFrontend from "wix-animations-frontend";
let timeline = wixAnimationsFrontend.timeline();