JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<div id='one'></div>
<div id='two'></div>

<script id='template' type='text/ractive'>
    <h2>{{demo}}</h2>
    <p>{{foo}}</p>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
    font-weight: 200;
    color: #353535;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

JavaScript

var one = new Ractive({
    el: 'one',
    template: '#template',
    data: { foo: 0 },
    interpolators: {
        step: function ( from, to ) {
            var delta = to - from;
            return function ( t ) {
                return +( from + delta * t ).toFixed( 1 );
            }
        }
    }
});

var two = new Ractive({
    el: 'two',
    template: '#template',
    data: { foo: 0 }
});

one.animate( 'foo', 1, {
    duration: 2000,
    easing: 'easeInOut',
    interpolator: 'step'
});

two.animate( 'foo', 1, {
    duration: 2000,
    easing: 'easeInOut'
});