JSFiddle - React, Tailwind, and code Playground

by Alvaro Silvino

HTML

<script src="https://cdn.rawgit.com/tusharghate/angular-simple-sprite/master/dist/angular-simple-sprite.min.js"></script>
<script src="http://minifiedjs.com/download/minified-src.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div id="container">
             
            <simple-sprite class="block" src="https://raw.githubusercontent.com/tusharghate/angular-simple-sprite/master/demo/images/alien-jump.png" frame-width="100" frame-height="155" frames="8" repeat="true" speed="50"></simple-sprite>
        </div>
    </div>
</div>

CSS

#container { position: relative; width: 300px; height: 300px; border: 1px solid black; }
.block { position: absolute; width: 30px; height: 30px; background-color: blue; }

JavaScript

var myApp = angular.module('myApp', ['simple-sprite']);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

    var MINI = require('minified');
    console.log(MINI);
    var $ = MINI.$,
        $$ = MINI.$$,
        EE = MINI.EE;
    var BLOCK_NUM = 1;
    var radius = 100;
    var d = 3000;

    // Animation loop to make blocks rotate
    $.loop(function (t, stopFunc) {
        $('.block').per(function (b, index) {
            console.log(b);
            var deg = 2 * Math.PI * (t / 5000 + index / 5); // 5s per rotation
            b.set({
                $top: Math.round(135 + Math.sin(deg) * 120) + 'px', 
                $left: Math.round(135 + Math.cos(deg) * 120) + 'px'
            });
        });
       // if (t > d) stopFunc();
    });

}