JSFiddle - React, Tailwind, and code Playground
HTML
<div id="val">:-)</div>
CSS
#val {
border-radius: 60px;
background-color: red;
height: 50px;
width: 50px;
line-height: 50px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
margin: auto;
font-size: 20px
}
JavaScript
// Rebound Library
// *** SpringSystem ***
(function () {
var rebound = {};
var SpringSystem = rebound.SpringSystem = function SpringSystem() {
this._springRegistry = {};
this._activeSprings = [];
this._listeners = [];
this._idleSpringIndices = [];
this._boundFrameCallback = bind(this._frameCallback, this);
};
extend(SpringSystem, {});
extend(SpringSystem.prototype, {
_springRegistry: null,
_isIdle: true,
_lastTimeMillis: -1,
_activeSprings: null,
_listeners: null,
_idleSpringIndices: null,
_frameCallback: function () {
this.loop();
},
_frameCallbackId: null,
getIsIdle: function () {
return this._isIdle;
},
createSpring: function () {
var spring = new Spring(this);
this.registerSpring(spring);
return spring;
},
getSpringById: function (id) {
return this._springRegistry[id];
},
getAllSprings: function () {
return Object.values(this._springRegistry);
},
registerSpring: function (spring) {
this._springRegistry[spring.getId()] = spring;
},
deregisterSpring: function (spring) {
removeFirst(this._activeSprings, spring);
delete this._springRegistry[spring.getId()];
},
advance: function (time, deltaTime) {
while (this._idleSpringIndices.length > 0) this._idleSpringIndices.pop();
for (var i = 0, len = this._activeSprings.length; i < len; i++) {
var spring = this._activeSprings[i];
if (spring.systemShouldAdvance()) {
spring.advance(time / 1000.0, deltaTime / 1000.0);
} else {
this._idleSpringIndices.push(this._activeSprings.indexOf(spring));
}
}
while...