Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
css3 transform rule and css animations with mootools, no change required in your script!
JavaScript
Tree: cd965f4d40

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Demos
Source
README.md
mootools.js
package.yml

README.md

Fx.CSS

this plugin provides two features: animation of the css transform rule and css animations in Fx.Tween, Fx.Morph and Fx.Elements. there is no change required in your script, requires Mootools 1.4+

How to use

if you just want to enable css transform animation:

HTML:

<script script="Fx.Parsers.Transform.js"></script>

Javascript:

//make every div that is a form child node editable
myDiv.tween('transform', ['rotate(0) scale(1, 0) skew(0, 3deg) translate(100px, 50px)', 'rotate(180deg) scale(1.5, 4) skew(0, 3deg) translate(20px, 3px)']);
anotherDiv.morph({color: '#fff', backgroundColor: '#000', borderColor: '#245884', transform: ['rotate(0deg) scale(1, 0) skew(0, 3deg) translate(100px, 50px)', 'rotate(180deg) scale(1.5, 4) skew(0, 3deg) translate(20px, 3px)']});

css animations are not used when transform is one of the properties to be animated:

HTML:

<script script="Fx.CSS.js"></script>
<script script="Fx.CSS.Tween.js"></script>
<script script="Fx.CSS.Morph.js"></script>
<script script="Fx.CSS.Elements.js"></script>

Javascript:

//make every div that is a form child node editable
myDiv.tween('height', 100);
myDiv.morph({color: '#000', backgroundColor: '#fff', borderColor: '#000'});

new Fx.Elements($$(selector)).start({0: {height: 50, width: 20}, 1: {height: 75, width:80}})
Something went wrong with that request. Please try again.