MooTools

How to use

window.addEvent('domready', function(){

    var fx = new Fx.Tween.CSS3('myElementID', {
        duration: 605,
        transition: 'quint:in:out'
    });

    fx.addEvent('complete', function(){
        alert('complete');
    });

    fx.start('height', 100, 300);

});

Demos

• You can see a simple online demo in this shell
• More complex demo: SqueezeBox using Fx.Tween.CSS3

Options Events

See: FX.Tween

Notes

Only short notated transitions are supported as option.transition by Fx.Tween.CSS3. Like:

new Fx.Tween.CSS3('myElementID', {

    transition: 'sine:in'

});

Performance

Tested on OSX 10.6:

• Safari 4: 30% faster than Fx.Tween
• Google Chrome 5: nearly equal compared to Fx.Tween
• Firefox 3.6.3: nearly equal compared to Fx.Tween
• Opera 10.53: nearly equal compared to Fx.Tween

Tested on iPhone 3GS:

• Mobile Safari: runns a lot faster (and smoother) than Fx.Tween (with default fps)

Tested on Windows 7:

• Safari 4: a lot faster than Fx.Tween (200 running instances of Fx.Tween hangs the browser, 200 Fx.Tween.CSS3 instances still working (40% CPU usage))
• Google Chrome 5: 50% faster than Fx.Tween
• Firefox 3.6.3: nearly equal compared to Fx.Tween
• Opera 10.53: nearly equal compared to Fx.Tween

License

See license file.

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.