JSFiddle - React, Tailwind, and code Playground
HTML
<h1 id="h1">Hello World!</h1>
JavaScript
var animator = (function () {
var g = function (id) {
return document.getElementById(id);
};
var supported = ('padding-top,padding-bottom,padding-left,padding-right,font-size,line-height,margin-top,margin-bottom,'
+ 'margin-left,margin-right,border-top,border-bottom,border-left,border-right,width,height').split(',');
var parse = function (prop) {
var f = parseFloat(prop);
if (isNaN(f)) f = parseFloat(prop.replace(/^[\-\d\.]+/, ''));
return f;
};
var buildStyles = function (style) {
var s = '';
for (var x in style) {
s += ' ' + x + ':' + (typeof style[x] == 'function' ? style[x]() : style[x]) + ';';
}
var el = document.createElement('div');
el.innerHTML = '<div style="' + s + '"></div>';
var res = {};
for (var i = 0, l = supported.length; i < l; i++) {
if ((x = el.firstChild.style[supported[i]])) {
res[supported[i]] = parse(x);
}
}
return res;
};
return function (el, opts) {
if (!el || !opts.css) return;
el = typeof el === 'string' ? g(el) : el;
var start = +new Date,
duration = opts.duration || 600,
end = start + duration,
calc = el.currentStyle || getComputedStyle(el, null),
style = buildStyles(opts.css),
data = {};
for (var p in style) {
data[p] = parse(calc[p]);
}
setTimeout(function go() {
var now = +new Date,
pos = now > end ? 1 : (now - start) / duration;
if (now >= end) {
return;
}
for (var p in style) {
el.style[p] = (data[p] + (style[p] - data[p]) * ((-Math.cos(pos * Math.PI) / 2) + 0.5)) + 'px';
}
setTimeout(go, 10);
}, 10);
};
})();
animator('h1', {
css: {
'font-size': '30px',
...