An animation timeline. Learn more.
Guides Additional information about this section
- Introduction
Functions Perform actions on an object
- add( )
Adds an animation to a timeline.
- onComplete( )
Sets an event handler that runs when the timeline completes playing.
- onRepeat( )
Sets an event handler that runs when a the timeline repeats.
- onReverseComplete( )
Sets an event handler that runs when the timeline completes playing in the reverse direction.
- onStart( )
Sets an event handler that runs when the timeline starts playing.
- pause( )
Pauses a timeline.
- play( )
Plays a timeline forwards.
- replay( )
Replays a timeline.
- reverse( )
Plays a timeline in reverse.
A timeline is used to compose animations together over time. You can synchronizemultiple animations on matched elements, control them as a whole, and preciselymanage their timing.
Was this helpful?
Adds an animation to a timeline.
Description
The add() function adds one or more animations on one or more pageelements to a timeline. Any element that mixes in the HiddenMixincan be added as an animation target in a timeline.
By default, when no offset is specified ,the animations in a timeline run inthe order they are added. When multiple animations are added using a single callto the add function, those animations default to run together at the same timewithin the timeline.
You can override the default order that the animations run using the offsetparameter.
You can add multiple add() functions to make more complex animations.
Syntax
function add(target: Element | Array<Element>, animation: AnimationAttributes | Array<AnimationAttributes>, [offset: number | string]): TimeLine
add Parameters
NAME
TYPE
DESCRIPTION
target Element | Array<Element> Page element orelements to animate that mix in HiddenMixin
animation AnimationAttributes | Array<AnimationAttributes> Attributes of the animation or animations to add to the timeline.
offset Optional number | string When the animation starts in the timeline. When no The If the specified relative For example, if a timeline is 1000 milliseconds long and you add an animation withan offset is specified, the animation added starts after the previous animation ends.offset can be relative to the last animation added or absolute within the wholetimeline using this following formats:"+=" expression to specify a relative offset in milliseconds, where theanimation starts the specified number of milliseconds after the previousanimation in the timeline ends. For example, "+=1000" starts the currentanimation 1 second after the previous animation ends."-=" expression to specify a relative offset in milliseconds, where theanimation starts the specified number of milliseconds before the previousanimation in the timeline ends. For example, "-=1000" starts the currentanimation 1 second before the previous animation ends.offset is before the current start of the timeline,the timeline is lengthened and the beginning of the timeline is now the startof the new animation. When played, the timeline will begin playing from itsoriginal start.offset of -500, the timeline length will become 1500 milliseconds and thebeginning of the timeline now be the start time of the newly added animation.
Returns
The timeline the animation was added to.
Return Type: TimeLine
Was this helpful?
Create a simple animation
You can test out the code in our example template.
Copy Code 1import { timeline } from 'wix-animations-frontend'; 2 3$w.onReady(() => { 4 const revealTimeline = timeline() 5 .add($w('#pink'), {duration: 1500, x: -160, scale: 1.3, easing: 'easeOutBack'}) 6 .add($w('#green'), {duration: 1500, x: 160, scale: 1.3, easing: 'easeOutBack'}, 0) 7 8 $w('#container').onMouseIn(() => { 9 revealTimeline.play(); 10 }); 11 12 $w('#container').onMouseOut(() => { 13 revealTimeline.reverse(); 14 }); 15});
Add animations to a timeline one at a time
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7const myImage = $w("#myImage"); 8 9timeline.add(myImage, { 10 "rotate": 360, 11 "scale": .5, 12 "duration": 1000 13}); 14 15timeline.add(myImage, { 16 "opacity": 0, 17 "duration": 1000 18});
Add multiple animations to a timeline together
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline1 = wixAnimationsFrontend.timeline(); 4let timeline2 = wixAnimationsFrontend.timeline(); 5 6// ... 7 8const myImage1 = $w("#myImage1"); 9const myImage2 = $w("#myImage2"); 10 11// In timeline1, the rotation animation and opacity 12// change animation will happen at the same time. 13timeline1.add(myImage1, 14 [ 15 { 16 "rotate": 360, 17 "scale": .5, 18 "duration": 1000, 19 "easing": "easeInCirc" 20 }, { 21 "delay": 500, 22 "opacity": 0, 23 "duration": 500 24 } 25 ] 26); 27 28// In timeline2, the rotation animation and opacity 29// change animation will happen one after the other. 30timeline2.add(myImage2, { 31 "rotate": 360, 32 "scale": .5, 33 "duration": 1000 34}); 35 36timeline2.add(myImage2, { 37 "opacity": 0, 38 "duration": 1000 39});
Add animations on multiple page elements together
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7const myImage1 = $w("#myImage1"); 8const someImages = $w("#myImage2", "#myImage3"); 9const vectorImages = $w("VectorImage"); 10 11// Adds an animation for myImage1 12timeline.add(myImage1, { 13 "rotate": 360, 14 "scale": .5, 15 "duration": 1000 16}) 17 18// Adds an animation for myImage2 19// and myImage3 together 20timeline.add(someImages, { 21 "rotate": -360, 22 "scale": .5, 23 "duration": 1000 24}) 25 26// Adds an animation for all the 27// vector images on the page 28timeline.add(vectorImages, { 29 "opacity": 0, 30 "duration": 1000 31})
Add animations to a timeline and play it
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5$w.onReady( function () { 6 const myImage1 = $w("#myImage1"); 7 const myImage2 = $w("#myImage2"); 8 const myImage3 = $w("#myImage3"); 9 10 timeline 11 .add( 12 [myImage1, myImage2], 13 { 14 "rotate": 360, 15 "scale": .5, 16 "duration": 1000 17 } 18 ) 19 .add( 20 myImage3, 21 { 22 "opacity": 0, 23 "duration": 500 24 }, 25 "-=500" 26 ) 27 .play(); 28} );
Sets an event handler that runs when the timeline completes playing.
Description
The event handler set by calling the onComplete() function runs when atimeline completes playing by reaching the end.
When a timeline has been set to repeat, the event handler runs at the endof the last repetition and does not run for the preceding repetitions.
If an event handler is already set for onComplete, setting a new eventhandler overrides the one set previously.
To remove an event handler you set previously, call the onComplete()function and pass null for the handler parameter.
Syntax
function onComplete(handler: Function): TimeLine
onComplete Parameters
NAME
TYPE
DESCRIPTION
handler Function The name of the function orthe function expression to run when the timeline completes playing.
Returns
The timeline the event handler was set on.
Return Type: TimeLine
Was this helpful?
Set an event handler that runs when a timeline completes playing forwards
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onComplete( () => { 8 // handle timeline forwards completion 9 console.log("Timeline has completed playing in reverse."); 10} );
Remove the event handler that runs when a timeline completes playing forwards
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onComplete( null );
Display a message when a timeline completes playing forwards
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5$w.onReady( function () { 6 const myImage = $w("#myImage"); 7 8 timeline 9 .add( myImage, { 10 "rotate": 360, 11 "scale": .5, 12 "duration": 1000 13 } ) 14 .add( myImage, { 15 "opacity": 0, 16 "duration": 1000 17 } ) 18 .onComplete( () => { 19 $w("#messageText").text = "Timeline has completed playing forwards."; 20 } ) 21 .play(); 22} );
Sets an event handler that runs when a the timeline repeats.
Description
The event handler set by calling the onRepeat() function runs when atimeline begins playing a repetition. It does not run for the initialplay of the timeline. However, when replaying a timeline that has alreadybeen played, the event handler runs even for the first repetition ofthe timeline.
If an event handler is already set for onRepeat, setting a new eventhandler overrides the one set previously.
To remove an event handler you set previously, call the onRepeat()function and pass null for the handler parameter.
Syntax
function onRepeat(handler: Function): TimeLine
onRepeat Parameters
NAME
TYPE
DESCRIPTION
handler Function The name of the function orthe function expression to run when the timeline repeats.
Returns
The timeline the event handler was set on.
Return Type: TimeLine
Was this helpful?
Set an event handler that runs when a timeline repeats
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline({"repeat": 3}); 4 5// ... 6 7timeline.onRepeat( () => { 8 // handle timeline repetition 9 console.log("Timeline is repeating."); 10} );
Remove the event handler that runs when a timeline repeats
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onRepeat( null );
Display a message when a timeline repeats
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline({"repeat": 3}); 4 5$w.onReady( function () { 6 const myImage = $w("#myImage"); 7 8 timeline 9 .add( myImage, { 10 "rotate": 360, 11 "scale": .5, 12 "duration": 1000 13 } ) 14 .add( myImage, { 15 "opacity": 0, 16 "duration": 1000 17 } ) 18 .onRepeat( () => { 19 $w("#messageText").text = "Timeline is repeating."; 20 } ) 21 .play(); 22} );
Sets an event handler that runs when the timeline completes playingin the reverse direction.
Description
The event handler set by calling the onReverseComplete() function runs when atimeline completes playing in reverse by reaching the beginning.
When a timeline has been set to repeat, the event handler runs at the endof the last repetition and does not run for the preceding repetitions.
If an event handler is already set for onReverseComplete, setting a new eventhandler overrides the one set previously.
To remove an event handler you set previously, call the onReverseComplete()function and pass null for the handler parameter.
Syntax
function onReverseComplete(handler: Function): TimeLine
onReverseComplete Parameters
NAME
TYPE
DESCRIPTION
handler Function The name of the function orthe function expression to run when the timeline completes playing.
Returns
The timeline the event handler was set on.
Return Type: TimeLine
Was this helpful?
Set an event handler that runs when a timeline completes playing in reverse
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onReverseComplete( () => { 8 // handle timeline reverse completion 9 console.log("Timeline has completed playing in reverse.");
10} );
Remove the event handler that runs when a timeline completes playing in reverse
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onReverseComplete( null );
Display a message when a timeline completes playing in reverse
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5$w.onReady( function () { 6 const myImage = $w("#myImage"); 7 8 timeline 9 .add( myImage, { 10 "rotate": 360, 11 "scale": .5, 12 "duration": 1000 13 } ) 14 .add( myImage, { 15 "opacity": 0, 16 "duration": 1000 17 } ) 18 .onReverseComplete( () => { 19 $w("#messageText").text = "Timeline has completed playing in reverse."; 20 } ) 21 .reverse(); 22} );
Sets an event handler that runs when the timeline starts playing.
Description
The event handler set by calling the onStart() function runs when atimeline 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, sinceit replays the timeline from its beginning.
When a timeline has been set to repeat, the event handler runs at the beginningof the first repetition and does not run for each successive repetition. To setan event handler that runs when a timeline repeats, use the onRepeat()function.
If an event handler is already set for onStart, setting a new eventhandler overrides the one set previously.
To remove an event handler you set previously, call the onStart()function and pass null for the handler parameter.
Syntax
function onStart(handler: Function): TimeLine
onStart Parameters
NAME
TYPE
DESCRIPTION
handler Function The name of the function orthe function expression to run when the timeline starts playing.
Returns
The timeline the event handler was set on.
Return Type: TimeLine
Was this helpful?
Set an event handler that runs when a timeline starts
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onStart( () => { 8 // handle timeline start 9 console.log("Timeline has started."); 10} );
Remove the event handler that runs when a timeline starts
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.onStart( null );
Display a message when a timeline starts
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5$w.onReady( function () { 6 const myImage = $w("#myImage"); 7 8 timeline 9 .add( myImage, { 10 "rotate": 360, 11 "scale": .5, 12 "duration": 1000 13 } ) 14 .add( myImage, { 15 "opacity": 0, 16 "duration": 1000 17 } ) 18 .onStart( () => { 19 $w("#messageText").text = "Timeline has started."; 20 } ) 21 .play(); 22} );
Pauses a timeline.
Description
Pauses a running timeline.
Note that when a timeline is created it is paused by default at thebeginning of the timeline.
Syntax
function pause(): TimeLine
pause Parameters
This function does not take any parameters.
Returns
The timeline to be paused.
Return Type: TimeLine
Was this helpful?
Pause a timeline
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.pause();
Create buttons for controlling how a timeline is played
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline( 4 { 5 "repeat": 3, 6 "repeatDelay": 100, 7 "yoyo": true 8 } 9); 10 11$w.onReady( function () { 12 const myImage = $w("#myImage"); 13 14 timeline 15 .add( myImage, { 16 "rotate": 360, 17 "scale": .5, 18 "duration": 1000 19 } ) 20 .add( myImage, { 21 "opacity": 0, 22 "duration": 1000 23 } ); 24 25 $w("#playButton").onClick( () => { 26 timeline.play(); 27 } ); 28 29 $w("#reverseButton").onClick( () => { 30 timeline.reverse(); 31 } ); 32 33 $w("#pauseButton").onClick( () => { 34 timeline.pause(); 35 } ); 36 37 $w("#replayButton").onClick( () => { 38 timeline.replay(); 39 } ); 40} );
Plays a timeline forwards.
Description
Plays a timeline that is not at its end in the forwarddirection and sets the hidden propertyof the animated elements to false.
Syntax
function play(): TimeLine
play Parameters
This function does not take any parameters.
Returns
The timeline to be played forwards.
Return Type: TimeLine
Was this helpful?
Play a timeline
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.play();
Create buttons for controlling how a timeline is played
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline( 4 { 5 "repeat": 3, 6 "repeatDelay": 100, 7 "yoyo": true 8 } 9); 10 11$w.onReady( function () { 12 const myImage = $w("#myImage"); 13 14 timeline 15 .add( myImage, { 16 "rotate": 360, 17 "scale": .5, 18 "duration": 1000 19 } ) 20 .add( myImage, { 21 "opacity": 0, 22 "duration": 1000 23 } ); 24 25 $w("#playButton").onClick( () => { 26 timeline.play(); 27 } ); 28 29 $w("#reverseButton").onClick( () => { 30 timeline.reverse(); 31 } ); 32 33 $w("#pauseButton").onClick( () => { 34 timeline.pause(); 35 } ); 36 37 $w("#replayButton").onClick( () => { 38 timeline.replay(); 39 } ); 40} );
Replays a timeline.
Description
Replaying restarts the play of a paused or playing timeline from thebeginning of the timeline and sets the hiddenproperty of the animated elements to false.
Note that when a timeline is created it is paused by default at thebeginning of the timeline.
Syntax
function replay(): TimeLine
replay Parameters
This function does not take any parameters.
Returns
The timeline to be replayed.
Return Type: TimeLine
Was this helpful?
Replays a timeline
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.replay();
Create buttons for controlling timeline playback
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline( 4 { 5 "repeat": 3, 6 "repeatDelay": 100, 7 "yoyo": true 8 } 9); 10 11$w.onReady( function () { 12 const myImage = $w("#myImage"); 13 14 timeline 15 .add( myImage, { 16 "rotate": 360, 17 "scale": .5, 18 "duration": 1000 19 } ) 20 .add( myImage, { 21 "opacity": 0, 22 "duration": 1000 23 } ); 24 25 $w("#playButton").onClick( () => { 26 timeline.play(); 27 } ); 28 29 $w("#reverseButton").onClick( () => { 30 timeline.reverse(); 31 } ); 32 33 $w("#pauseButton").onClick( () => { 34 timeline.pause(); 35 } ); 36 37 $w("#replayButton").onClick( () => { 38 timeline.replay(); 39 } ); 40} );
Plays a timeline in reverse.
Description
Plays a timeline that is not at its beginning in the reversedirection.
Syntax
function reverse(): TimeLine
reverse Parameters
This function does not take any parameters.
Returns
The timeline to be played in reverse.
Return Type: TimeLine
Was this helpful?
Play a timeline
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline(); 4 5// ... 6 7timeline.reverse();
Create buttons for controlling how a timeline is played
Copy Code 1import wixAnimationsFrontend from 'wix-animations-frontend'; 2 3let timeline = wixAnimationsFrontend.timeline( 4 { 5 "repeat": 3, 6 "repeatDelay": 100, 7 "yoyo": true 8 } 9); 10 11$w.onReady( function () { 12 const myImage = $w("#myImage"); 13 14 timeline 15 .add( myImage, { 16 "rotate": 360, 17 "scale": .5, 18 "duration": 1000 19 } ) 20 .add( myImage, { 21 "opacity": 0, 22 "duration": 1000 23 } ); 24 25 $w("#playButton").onClick( () => { 26 timeline.play(); 27 } ); 28 29 $w("#reverseButton").onClick( () => { 30 timeline.reverse(); 31 } ); 32 33 $w("#pauseButton").onClick( () => { 34 timeline.pause(); 35 } ); 36 37 $w("#replayButton").onClick( () => { 38 timeline.replay(); 39 } ); 40} );
