Chaining

Chaining - Chaining is fundamentally simple to use. It's built right into the system with jWorkflow.

var alicejsSlide = alice.init({workflow: true});
var aces = ["elem1", "elem2", "elem3", "elem4"];

alicejsSlide.slide({
            elems: aces,
            move: "left",
            duration: {
                "value": "1000ms",
                "randomness": "0%",
                "offset": "150ms"
            }
        }).delay(2000)
        .slide({
            elems: aces,
            move: "right",
            duration: {
                "value": "1000ms",
                "randomness": "0%",
                "offset": "150ms"
            }
        }).delay(2000)
        .slide({
            elems: aces,
            move: "down",
            duration: {
                "value": "1000ms",
                "randomness": "0%",
                "offset": "150ms"
            }
        }).delay(2000)
        .slide({
            elems: aces,
            move: "up",
            duration: {
                "value": "1000ms",
                "randomness": "0%",
                "offset": "150ms"
            }
        }).start();

        // All chained animations must conclude with .start(), and be separated by delay(#)

Ace of Clubs

Ace of Diamonds

Ace of Hearts

Ace of Spades