Skip to content
Mimics the Mootools Fx.Tween behavior but tries to use native CSS3 transition if possible.
JavaScript Erlang
Pull request Compare This branch is even with SunboX:master.
Latest commit 87ff7a7 Jan 30, 2015 @mcfedr Merge pull request #10 from Danman7/master
Updated duration option check to test for a valid string.
Failed to load latest commit information.
Examples Added Fx.Elements support Aug 31, 2011
Source Updated duration option check to test for a valid string. Jan 30, 2015
.c9settings.xml
.nfs6FF14 mootools 1.3 nocompat fix - Fixes #4 - thx to Dimitar Christoff Apr 21, 2011
.project changed web link Oct 2, 2010
README.md renamed repo Aug 31, 2011
license Added support for Fx.Morph Aug 31, 2011
package.yml version Nov 10, 2011
screen.png try to rename screenshot (workaround for mootools forge) May 18, 2010

README.md

Fx.CSS3

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.

Screenshot

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

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);

});

License

See license file.

Something went wrong with that request. Please try again.