add( )

Adds an animation to a timeline.

Description

The add() function adds one or more animations on one or more page elements to a timeline. Any element that mixes in the HiddenMixin 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.

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 or elements 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 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

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} );