Command registerSequence

- NOTE: This documentation is for Velocity v2.

Command - RegisterSequence

See the Advanced: Sequences page for details on how sequences work.

This command allows you to register one or more named sequences for later use.

Sequence

The sequence supplied is an object with specific keys:

Default duration

It may contain a "duration" key that is used for the default duration when no duration option has been supplied to the animation when started - if not supplied then the Velocity default duration will be used instead.

Percentage steps

The other keys are the percentages that a particular step triggers as strings, and may contain more than one percentage separated by commas. It is quite safe to have multiple different groups of percentages that contain the same value as in the example below. The % symbol is optional, but aids in readability.

Properties

Unlike normal animations the properties for a sequence cannot be forcefed, this is because they are steps at specific percentages through the animation. If you wish to forcefeed an animation, then set the 0% step to the initial value wanted.

Due to this the only two permissable formats are "value" or ["value", "easing"]. The easing is used to ease between the previous step and the current one (hence providing an easing for 0% is completely redundant as there is no previous step).

When a sequence is run in reverse the easings will also be reversed so it is an exact mirror image of the normal sequence.

Example

Velocity("RegisterSequence", "bounce", {
    "duration": 1000,
	"0,100%": {
		transformOrigin: "center bottom"
	},
	"0%,20%,53%,80%,100%": {
		transform: ["translate3d(0,0px,0)", "easeOutCubic"]
	},
	"40%,43%": {
		transform: ["translate3d(0,-30px,0)", "easeInQuint"]
	},
	"70%": {
		transform: ["translate3d(0,-15px,0)", "easeInQuint"]
	},
	"90%": {
		transform: "translate3d(0,-4px,0)"
	}
});