Skip to content

2.0.3-beta

Pre-release
Pre-release
Compare
Choose a tag to compare
@Rycochet Rycochet released this 27 May 21:55
· 38 commits to master since this release

Possibly the final beta release before this comes out of beta.

The major change in this version is the addition of Sequences.

These replace the old V1 RunSequence and transitions. They are about as powerful as plain CSS animations, but run within the Javascript layer of the library, and allow you almost full control over them for creating and playing with them at runtime.

When a tab is hidden it will now update via a background web-worker - this prevents issues that have been occuring as a result of browser optimisations. When this happens it will reduce the FPS to 30FPS (an option for reducing this further will appear at some point).

The UI-Pack has been updated, and is now simply a list of sequences that are available - these match the nice selection available from animate.css - as such they are intended as much as examples, as they are for use.

Example:

// Note that this one is already included in the UI-Pack...
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)"
    }
});

document.querySelector("#myElement").velocity("bounce");

You may pass any options you wish to a sequence. There are (currently) only a small number of defaults allowed when defining them, but anything you pass when calling will override them.

Keep your eyes open for updated documentation covering this soon.