How to use

Demo Links

CSS3 ex1, Three.js ex1, RaphaelJS ex1, Chaining ex1

Basic Usage

var fx = new Fx.Anything({
    onReport: function(progress, mixedVar) {
        // use progress as your variable to control your effect.
        // optionally pass in mixedVar 
    }
});
fx.start();
fx.start('my string'); // mixedVar will contain your string.
fx.start([1, 2]); // mixedVar will contain your array.

Samples

CSS3 Transform

Demo: CSS3 ex1

var _propeller = document.body.getElement('.propeller');

var rotation = 0;
var fx = new Fx.Anything({
    duration: 20000,
    transitions: Fx.Transitions.Quad.easeInOut,
    onReport: function(progress) {
        rotation = progress*(360*12);

        var str_rotation = 'rotate('+rotation+'deg)';
        _propeller.setStyles({
            'transform': str_rotation,
            '-ms-transform': str_rotation,
            '-webkit-transform': str_rotation,
            '-o-transform': str_rotation,
            '-moz-transform': str_rotation
        });
    }        
});

fx.start();

Three.js

Demo: WebGL ex1

var fx = new Fx.Anything({
    duration: 1600,
    transition: Fx.Transitions.Bounce.easeOut,
    onReport: function(progress) {
        pointLight.position.x = progress*220-100;
        pointLight.position.y = progress*60-30;
        renderer.render(scene, camera);
    }        
});
fx.start();

RaphaelJS

Demo: Canvas ex1

var scaleTo = 0.5;
var fx = new Fx.Anything({
    duration: 2000,
    link: 'cancel',
    transition: Fx.Transitions.Elastic.easeOut,
    onReport: function(progress, state) {
        var newScale = (state == 'on') ? progress * scaleTo + 1 : (1+scaleTo) - (progress * scaleTo);
        mainImage.transform('s'+newScale);
        mainImage.attr({
            opacity: newScale-0.5
        });
    }   
});
document.id('holder').addEvents({
    mouseenter: fx.start.bind(fx, 'on'),
    mouseleave: fx.start.bind(fx, 'off')
});

Chaining Example

Demo: Chaining ex1

fx.start().chain(function() {
    fxCracking.start({
        collection: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'],
        codeLength: 6,
        fontSize: 12,
        cracked: []
    }).chain(function() {
        _door.setStyle('background-color', 'green');
        document.body.getElements('strong, em').setStyle('color', 'green');
        fx.start(true);
    });
});

Release Notes

More coming soon.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.