Hi guys,
i'm trying to find out how to use gsap in conjunction with Pixi to be able to control a spritesheet through the gsap tick but i'm having difficulties to understand how to make it work.
Here's how i generate the animatedSprite dynamically from a json feed:
texture = images[layer.name].texture
const fw = 300
const fh = 250
const sprW = texture.width
const sprH = texture.height
const cols = Math.floor(sprW / fw)
const rows = Math.floor(sprH / fh)
const totalFrames = layer.frames
let frameCounter = 0
const spriteSheetFrames = []
for(let r=0; r < rows; r++) {
for(let c=0; c < cols; c++) {
console.log(c * fw, r * fh)
if(frameCounter < totalFrames) spriteSheetFrames.push(new PIXI.Texture(texture, new PIXI.Rectangle(c*fw, r*fh, fw, fh)))
frameCounter++
}
}
const animation = {}
animation["sequence"] = spriteSheetFrames
const spritesheet = new PIXI.AnimatedSprite(animation.sequence)
spritesheet.alpha = layer.alpha || 0
spritesheet.x = layer.x || 0
spritesheet.y = layer.y || 0
spritesheet.animationSpeed = layer.speed
Now, i have a main timeline that run a sequence of animations on different elements, how i can play the AnimatedSprite and control it with gsap?
i tried to do something like this:
tl.to(layer.spritesheet, duration, { onStart: () => layer.spritesheet.play(), onComplete: () => layer.spritesheet.stop() }, start)
which it works but first is just a hack, second i need to set the duration exactly as the duration of the original animation and third i cannot control it, if i stop the timeline the spritesheet does not stop at all, and that's because i think it does not use the timeline timer.
Any suggestion?
thanks.