JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<canvas width></canvas>

JavaScript

// animator
function animate(initialProps, finalProps, opts = {}) {
	var div = document.createElement('div'),
  	options = Object.assign({
    	onStart() {},
      onEnd() {}
    }, opts),
    propsMap = {
    	x: 'translateX($)',
      y: 'translateY($)'
    },
  	style = div.style
    
  function normalizePropName(p) {
  	return 
  }
    
  // set transitions
  if (Array.isArray(props)) {
    style.transition = props.reduce((acc, val) => {
      return `${acc}, ${getTransitionByProp(val)}`
    }, '')
  } else {
    style.transition = getTransitionByProp(prop)
  }
  
  function getTransitionByProp(prop) {
  	return `${ props.name } ${ props.speed }ms`
  }
  
  function setProps(props) {
  	if (Array.isArray(props)) {
      props.forEach(prop => {
        style[prop.name] = prop.value
      }, '')
    } else {
      style[prop.name] = prop.value
    }
  }
  
  function onEnd() {
   	div.removeEventListener('transitionstart', onStart)
    div.removeEventListener('transitionend', onEnd)
    options.onEnd()
  }
  
  function onStart() {
  	options.onStart()
  }
  
  div.addEventListener('transitionstart', onStart)
  div.addEventListener('transitionend', onEnd)
  
  setProps(initialProps)
  setTimeout(() => setProps(finalProps), 8)
  
  return function() {
  	get(prop) {
    	return window.getComputedStyle(div)[prop]
    }
  }
}

const canvas = document.querySelector('canvas')
	c = canvas.getContext('2d')
  
canvas.width = window.innerWidth
canvas.height = window.innerHeight

const particle = {
	x: canvas.width / 2,
  y: canvas.height / 2,
  color: 'red'
}

const particleAnimation = animate([{ c}][{ prop: 'color'}])

(function render() {
	c.clearRect(0, 0, canvas.width, canvas.height)
	requestAnimationFrame(render)
}())