canvas

*
  box-sizing border-box
  
body
  display grid
  place-items center
  min-height 100vh
  background hsl(210, 24%, 42%)
  
canvas
  height calc(var(--height, 200) * 1px)
  width calc(var(--width, 200) * 1px)
  background hsl(0, 0%, 10%)
  box-shadow 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)

import gsap from 'https://cdn.skypack.dev/gsap'
import { GUI } from 'https://cdn.skypack.dev/dat.gui'

const CANVAS = document.querySelector('canvas')
const CONTEXT = CANVAS.getContext('2d')

const CONFIG = {
  canvasSize: 200,
  squareSize: 20,
  clear: true
}

CANVAS.width = CANVAS.height = CONFIG.canvasSize

const SQUARE = {
  size: CONFIG.squareSize,
  x: CONFIG.canvasSize / 2,
  y: (CONFIG.canvasSize / 2) - (CONFIG.squareSize / 2),
}

gsap.set(SQUARE, {
  x: `-=${SQUARE.size * 4.5}`
})

gsap.to(SQUARE, {
  x: `+=${SQUARE.size * 8}`,
  yoyo: true,
  repeat: -1,
  ease: 'none'
})

const RENDER = () => {
  if (CONFIG.clear) CONTEXT.clearRect(0, 0, CANVAS.width, CANVAS.height)
  CONTEXT.fillStyle = 'hsl(280, 80%, 50%)'
  CONTEXT.fillRect(SQUARE.x, SQUARE.y, SQUARE.size, SQUARE.size)
}

gsap.ticker.add(RENDER)

const CTRL = new GUI({ width: 300 })
CTRL.add(CONFIG, 'clear').name('Clear each frame?')