JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div>test1<move dx="0.2" t=1000>test2<move dy="0.1" t=1000>test3<move dy="-0.1" dx="-0.2" t=1000>test4</move><div>test5</div></move></move>test6</div>

CSS

move {
    position:absolute;
}

JavaScript

var moves = document.getElementsByTagName('move');
[].slice.call(moves).forEach(function (e) {
    e.setAttribute('style', getComputedStyle(e).cssText);
    e.style.left = e.getBoundingClientRect().left + 'px';
    e.style.top = e.getBoundingClientRect().top + 'px';
});
var move = function () {
    [].slice.call(moves).forEach(function (e) {
        // e.setAttribute('style',getComputedStyle(e).cssText);
        var x = parseFloat(e.getAttribute('x')),
            y = parseFloat(e.getAttribute('y')),
            t = parseFloat(e.getAttribute('t')),
            dx = parseFloat(e.getAttribute('dx')) || x / t,
            dy = parseFloat(e.getAttribute('dy')) || y / t;
        e.setAttribute('dx', dx);
        e.setAttribute('dy', dy);
        if (t !== 0) {

            e.style['top'] = parseFloat(parseFloat(e.style.top) + dy) + "px";
            e.style['left'] = parseFloat(parseFloat(e.style.left) + dx) + "px";
            e.setAttribute('x', x - dx);
            e.setAttribute('y', y - dy);
            e.setAttribute('t', parseInt(e.getAttribute('t')) - 1);
        }
    });
};
var anim = function () {
    move();
    requestAnimationFrame(anim);
};
requestAnimationFrame(anim);