Need help with animating an object with existing collision detection

[ChaosTheory]

I'm sorry for the lengthy file to begin, this is the whole project which I thought may help anyone who could answer my plea. I have a problem trying to find out how to animate the Thwomp, and keeping it as part of the game as an enemy that makes the player start from the beginning again using the collision code from utils.js and importing the image from images.js. I have a short code, which I believe to be effective, but I'm not sure where to put it. 

const tl = new gsap.timeline({repeat:-1})
tl.to('#thwomp', {
  y: 300,
  ease: 'expo.in'
})
tl.to('#thwomp', {
  delay: 2,
  y: 0,
  ease: 'expo',
  duration: 4
})

Any help will be greatly appreciated, thank you.

canvas.js utils.js audio.js images.js

See the Pen YzRRRxe by chriscourses (@chriscourses) on CodePen

[Rodrigo]

Hi @ChaosTheory and welcome to the GreenSock forums!

 

Unfortunately we don't have time to create custom solutions or dig through complex code trying to find a particular issue.

 

Maybe this example by @OSUblake could help:

See the Pen vNwRdO by osublake (@osublake) on CodePen

 

Other than that I don't know what to tell you, GSAP doesn't have a collision detection engine or something of the sort, you'd have to come up with that or use something else. Probably based on some velocity parameter or something like that you could easily create a GSAP animation to go along, but the previous and most challenging part is not something that comes right out of the box.

 

I don't know if this helps somehow as I'm not really 100% clear on what's the objective you have in mind:

See the Pen poQmKqN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!