Vagabond9

Heya, just in case anyone else is running into this problem... I'm using this in a timeline this.master = gsap.timeline({ onComplete: () => { $(id).remove(); }, }); Which effectively removed the div before the delayedCall happens. So after fiddling came up with this alternate to the delayedCall var anispeed = 1; var repeats = 5; tween(id, {...}, { repeat: repeats, .... }); master.add(tween); GSAP is fun to work with!

Perfect! I knew there had to be a good gsap way to do it I was adding multiple duplicate tweens to the timeline, but that was messy. This is clean. Thanks

Hello, I'm using steppedease to display sprite sheets. The problem I'm having is the sprite frames run once for the duration parameter. So if I have a duration of say 20 the spites (background steppedease) runs super slow. What I'd like to be able to do is control the speed of the sprite frames separate from the duration parameter, and have it continually loop for the length of the tween duration.

Excellent, thanks for the help!

Welp, with the help above and many hours of trolling forums, think I've finally got it. Previous codepen has been updated. Used timline insertion and a label to get it there. If there's a better way to achieve this I'm all ears. Thanks

Really apricate the patience. I'm learning gsap and codepen while trying to use this in my project. Here's is a tween that shows exactly what I'm trying to do, simplified. tween1 + tween1ani run together then tween2 + tween2ani run together Please ignore the sprite frames, the numbers are off. https://codepen.io/Vagabond9/pen/rNQNXxN

Thanks for the reply. I'm probably not describing this correctly, but to simplify. I'd like to have a timeline that runs several tween consecutively. (done) While each tween is running, I'd like to be able to change the background-position-x, which lets me use a sprite sheet animation. I've tried to cobble this together several ways: Nested tweens almost work but the the 1st nested animation runs for the entire timeline (not ending with the tween) Tried adding onComplete to kill the nested tween, but that stops the whole timeline. onComplete: () => { console.log("Tween end"); if (anitween) { anitween.kill(); } },

I realized what I posted was way too much code to get an answer. Updated the pen to a simple example. My goal is to change the background-position-x to display sprite sheets for each tween. I've added a nested tween for but it either runs the whole timeline or if I stop it the 2nd tween doesn't run. Thanks for any help!

Greetings, I've been struggling with this this issue far too long. Should be simple (I think). I'm using timeline to chain multiple tweens that move an object around the screen. While each tween is playing, I want to have a separate (or encapsulated) tween that changes the background-url for a sprite sheet animation. I've gotten everything working except when I add the animation tween it stops the rest of the timeline from playing. the animation tweens are being inserted into the timeline like so const spriteTimeline = gsap.timeline({}); spriteTimeline.to(....) this.animation = spriteTimeline; this.tl.add(this.animation, 0); // Set a delay of 0 to start the sprite animation immediately added a pen, but it's missing something, not running. at lest it shows the code so far