How to use Gsap with DOM element of P5js

If you need to integrate GSAP with P5.js, I’ve already written something about it.

If you need to trigger a GSAP animation using P5.js DOM elements, you need to workaround a bit to make it to work properly.

For instance, this simple script, that triggers a GSAP animation from a DOM P5.js element, doesn’t work:

var x = 0
var y = 0
var btn

function setup(){
	btn = createButton('click')
	btn.mousePressed(animate)
}

function draw(){
  circle(x, y, 50)
}

function animate(){
  gsap.to(this, {x:100, y:100})
}

The reason is that the this variable has a different context when called using a DOM element.

To workaround it, just keep the this context of the sketch in a custom variable, such as:

/* ... */
var sketch = this

/* ... */

function animate(){
  gsap.to(sketch, {x:100, y:100})
}

Now you can create your UI element that can drive any GSAP animations without issues.