Fx.CSS3 2.2.0

Mimics the Fx behavior but tries to use native CSS3 transition if possible. Like the Fx effect, Fx.CSS3 is used to transition any CSS property from one value to another.

Details

Author
Fred Cox
Current version
2.2.0
GitHub
mcfedr/mootools-fx-css3
Downloads
37971
Category
Effects
Tags
Report
GitHub Issues

Releases

Dependencies

  • _self_/_current_:
    • Core/Class.Extras
    • Core/Element.Event
    • Core/Element.Style
    • Core/Fx
    • Core/Fx.Tween
    • Core/Fx.Morph
    • More/Array.Extras
    • More/Fx.Elements

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

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.

blog comments powered by Disqus