[Background sprite speed vs duration]

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!

[Background sprite speed vs duration]

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

[Background sprite speed vs duration]

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. 

See the Pen BaGNObO by Vagabond9 (@Vagabond9) on CodePen

[Chaining animated tweens]

Excellent, thanks for the help!

[Chaining animated tweens]

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

[Chaining animated tweens]

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. 

See the Pen rNQNXxN by Vagabond9 (@Vagabond9) on CodePen

[Chaining animated tweens]

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();
                        }
                    },
 

 

[Chaining animated tweens]

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!

[Chaining animated tweens]

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

See the Pen GRwRmdg by Vagabond9 (@Vagabond9) on CodePen