JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<canvas id="canvas"></canvas>

JavaScript

var timeline = {
    sprites: {
        sprite1: {
            image: '--Imagedata Here--', // image OR shape (pick one): what should be rendered
            shape: {
                type: 'rect',
                data: [150, 100] // Width and height of object (x and y come later)
            },
            initial: {
                x: 0,
                y: 0,
                layer: 0 // The z layer on which the sprite appears (smaller is farther "up" the stack, closer to you)
            },
            infoPoints: [
                {
                    type: 'pos',
                    data: {
                        x: 15,
                        y: 250
                    },
                    time: 3,
                    transition:'linear'
                },
                {
                    type: 'color',
                    data: {
                        color: '#ff0000'
                    },
                    time: 5,
                    transition:'none'
                }
            ]
        }
    }
};

window.onload = function () {

};