<div id="box" class="box ml-[16px] mt-[16px] w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
gsap.registerPlugin({
  name: 'myCustomProperty',
  init(target, value) {
    gsap.to(target, {
      x: value.x,
      backgroundColor: value.backgroundColor,
      rotate: value.rotate,
      duration: value.duration
    })
  }
})

gsap.to('.box', {
  myCustomProperty: {
    x: 100,
    backgroundColor: 'red',
    rotate: 360,
    duration: 3
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.tailwindcss.com
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js