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 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.
Page element or elements to animate that mix in HiddenMixin
Attributes of the animation or animations to add to the timeline.
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.