JSFiddle - React, Tailwind, and code Playground

by davidck

HTML

<script src="https://raw.github.com/davidck/Fx.Anything/0.1/Source/Fx.Anything.js"></script>
<h1>Fx.<em>Anything</em></h1>

<div class="block">
    <div class="door">
    </div>
</div>

<p class="debug"></p>

CSS

body {
  padding: 40px;    
}
h1, div, p {
    font-family: Arial;
}
h1 {
  font-size: 28px;    
}
em {
    color: red;
    font-style: italic;
}
.debug {
    color: #999;
}
.debug strong {
    color: #f00;   
}
.block {
    margin: 20px 0;
    position: relative;
    width: auto; height: 100px;
    background: black;
    overflow: hidden;
}
.door {
    position: absolute;
    left: 80px; top: 0;
    width: 60px; height: 10px;
    background: red;
}

JavaScript

var _debug = document.body.getElement('.debug'),
    _door = document.body.getElement('.door'),
    _block = document.body.getElement('.block'),
    block_height = _block.getSize().y;
var fx = new Fx.Anything({
    duration: 1600,
    link: 'cancel',
    transition: Fx.Transitions.Bounce.easeOut,
    onReport: function(progress, mixedData) {
        var percent = Math.round(progress*100);
        var y = (mixedData === true) ? block_height-percent : percent;
        _door.setStyle('height', y);
    }
});

var fxCracking = new Fx.Anything({
    duration: 12000,
    fps: 15,
    link: 'cancel',
    transition: Fx.Transitions.Sine.easeOut,
    onReport: function(progress, data) {
        var len = data.collection.length;
        var i = Math.floor(progress * data.codeLength);
        var remain = data.codeLength - i;
        var result = '';
        var rand;
        var str_cracked = '';
        remain.times(function() {
            rand = Number.random(0, len-1);
            result += data.collection[rand]+' ';
        });
        data.cracked[i] = data.collection[rand];
        data.cracked.each(function(c, i) {
            if (i == data.cracked.length-1) { return; }
            str_cracked += c + ' ';
        });
        result = '<strong># '+str_cracked+'</strong> '+result;
        _debug.set({
            html: result,
            styles: {
                fontSize: data.fontSize+i*4
            }
        });
    }
});

fx.start().chain(function() {
fxCracking.start({
    collection: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'],
    codeLength: 6,
    fontSize: 12,
    cracked: []
}).chain(function() {
    _door.setStyle('background-color', 'green');
    document.body.getElements('strong, em').setStyle('color', 'green');
    fx.start(true);
});
});