The wix-animations module contains functionality for working with
animations. Learn more.
animations. Learn more.
Guides (Additional information about this section)
Functions (Perform actions on an object)
- timeline( ) : Creates a new animation timeline.
Subcategories
- TimeLine : An animation timeline.
Related Content
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.
The following list outlines the typical process of creating and playing an animation timeline:
- Create a new timeline using the
function.timeline()
- Add animation attributes and sequence them within the timeline using the
function.add()
- Control the playing of the timeline using the
,play()
,reverse()
, andpause()
functions.replay()
To use the Animations API, import
wixAnimations
from the wix-animations
module:import wixAnimations from 'wix-animations';
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
sequence them within the timeline using the
add()
function.Use the timelineOptions parameter to specify whether the timeline repeats
and how the repetitions are played.
and how the repetitions are played.
Syntax
function timeline([timelineOptions: TimeLineOptions]): TimeLine
timeline Parameters
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();
} );
} );
Returns
The newly created timeline.
Return Type: TimeLine
Previously published at https://www.wix.com/velo/reference/wix-animations/timeline