JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://cdn.rawgit.com/baconjs/bacon.js/master/dist/Bacon.js"></script>
<script src="https://cdn.rawgit.com/bagel-framework/Butter.js/master/dist/Butter.js"></script>
<div data-css="x as left and y as top" class="ball"></div>

CSS

.ball {
    position: absolute;
    margin-top:150px;
    margin-left: 150px;
    width:30px;
    height:30px;
    background: #333;
    border-radius:30px;
    position: absolute;
}

JavaScript

/**
 * Butter.js https://github.com/bagel-framework/Butter.js
 */

var view = new Butter.View({
    el: '.ball',
    data: {
        x: 0,
        y: 0
    },
    afterRender: function () {
        
        var self = this,
            time;
 
        setInterval(function(){
            time = new Date().getTime() * 0.005;
            self.data.set({
                x: Math.sin(time) * 100,
                y: Math.cos(time) * 100
            });
        }, 1000 / 33);
        
    }
    
}).render();