JSFiddle - React, Tailwind, and code Playground

by mcfedr

HTML

<script src="https://raw.github.com/mcfedr/mootools-fx-css3/master/Source/Fx.CSS3.js"></script>
<div id="test">
    click here to test tween
</div>
<div id="test2">
    click here to test morph
</div>

CSS

#test, #test2 {
    font-family: Verdana, Arial;
    color: #fff;
    background: #45719B;
    border: solid 1px #26445F;
    text-shadow: 0 1px 0 #0C131C;
    height: 100px;
    padding: 10px;
    cursor: pointer;
}

JavaScript

window.addEvent('domready', function(){
    var fx = new Fx.Tween.CSS3('test', {
        duration: 605,
        transition: 'quint:in'
    });
    fx.addEvent('complete', function(){
        alert('complete');
    });
    
    var to = 100;
    $('test').addEvent('click', function(){
        //fx.start('height', 100, 300);
        fx.start('height', (to == 100 ? (to = 300) : (to = 100)));
        //fx.cancel.delay(200, fx);
    });
    var fx2 = new Fx.Morph.CSS3('test2', {
        duration: 605,
        transition: 'quint:in'
    });

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

    var to = 100;
    $('test2').addEvent('click', function(){
        //fx.start('height', 100, 300);
        fx2.start({'height' : [200, (to == 100 ? 300 : 100)],
                    'width' : [200, (to == 100 ? (to = 300) : (to = 100))] });
        //fx.cancel.delay(200, fx);
    });
});