add( )

Adds an animation to a timeline.

The add() function adds one or more animations on one or more page elements to a timeline. Any element that has animation capabilities such as hide() and show() 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.

Method Declaration
Copy
Method Parameters
targetanyRequired

Page element or elements to animate that has animation capabilities such as hide() and show().

AnimationAttributesAnimationAttributes | Array<AnimationAttributes>

Attributes of the animation or animations to add to the timeline.

offsetunion

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
Return Type:TimeLine
Did this help?