JSFiddle - React, Tailwind, and code Playground

by João Vitor Scheuermann

HTML

<div id="teste"></div>

CSS

#teste {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  background-color: red;
}

JavaScript

function Animation(animation_data) {

  function string(value, sufix) {
    return `${value}${sufix}`
  }

  /*====================================================================================*/

  function Iterable(totalIterations, type, from, to) {
    this.type = type;
    let currentValue = from;
    let force = to / totalIterations;
    this.update = (dt, easing) => {
      //TODO: aplicar easing e dt
      currentValue += force * dt * easing;
      return currentValue
    };
    this.getCurrentValue = () => {
      return currentValue;
    }
  }

  /*====================================================================================*/

  function getAllIterables(totalIterations, data) {
    let ITERABLES = []
    for (let dataKey in data) {
      ITERABLES.push(new Iterable(totalIterations, dataKey, data[dataKey].from, data[dataKey].to))
    }
    return ITERABLES;
  }

  /*====================================================================================*/

  function processAnimationData(ad) {
    // Armazena todas as animaçoes:
    let ANIMATIONS_READY = [];
    let FrameRate = 60;
    // Para cada animação:
    ad.forEach(animation => {

      let totalIterations = animation.duration * FrameRate;
      let iterables = getAllIterables(totalIterations, animation.data);

      ANIMATIONS_READY.push({
        totalIterations: totalIterations,
        iterables: iterables
      })
    })
    return ANIMATIONS_READY;
  }

  /*====================================================================================*/

  let _TotalIterationCount = 0;
  let _CurrentIteration = 0;
  let _CurrentAnimation = 0;

  let ANIMATIONS = processAnimationData(animation_data)

  /*====================================================================================*/


  this.update = (dt) => { 	    
    
    if (ANIMATIONS[_CurrentAnimation] !== undefined && ANIMATIONS[_CurrentAnimation].totalIterations >= _CurrentIteration) {
    
     ...