JSFiddle - React, Tailwind, and code Playground

by André Fiedler

HTML

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

CSS

#test {
    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);
    });
})