Background sprite speed vs duration

[Vagabond9]

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

[Cassie]

Heya!

 

Always nice to see club GSAP folks in here 💚 Thanks for the support.

 

How about something like this?

 

See the Pen mdQJQxJ?editors=0010 by GreenSock (@GreenSock) on CodePen

[Vagabond9]

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

[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!