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

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.