Demo for Framer Cycle utility

Framer utils.cycle

/// Test view setup
view = new View({x:50,y:50,width:100,height:100})

// Define the functions to cycle through


// Create cycle variables.
var scales = utils.cycle(.3, .6, 1, 1.3, 1, .6)
var coords = utils.cycle({x: 250, y:50}, {x: 250, y:250}, {x: 50, y:250}, {x:50, y:50})
var rotations = utils.cycle(-90,45,-110,180,0)
var curves = utils.cycle("ease-in-out", "spring(40,8,1000)", "linear", "bezier-curve(0.175, 0.885, 0.32, 1.275)")

// Create another cycler. This one
// uses anonymous functions. the animations 
// call the different cyclers above.
var toggler = utils.cycle(
    function(){
        newCoords = coords()
        view.animate({
            properties: {opacity: .75, x: newCoords.x, y: newCoords.y, scale: scales()},
            curve: curves(),
            time: 250
        })
    }, 
    function(){
        newCoords = coords()
        view.animate({
            properties: {opacity: 1, x: newCoords.x, y: newCoords.y, scale: scales()},
            curve: curves(),
            time: 250
        }) 
    },
    function(){
        view.animate({
            properties: {rotationZ: rotations()},
            curve: curves(),
            time: 250
        }) 
    }
)

// when clicked, the view cycles through the toggler functions
view.on("click", function(){
    toggler()()
})