Chaining animated tweens

[Vagabond9 2 Likes (Newbie)]

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

[Rodrigo 5,885 Likes (Superhero)]

Hi @Vagabond9 and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

Yeah, your codepen is missing a few elements as there are a bunch of warnings of targets not being found:

 

Also we don't need the actual setup you have in your app, just a few lines of code that recreate, in the simplest way possible, the issue you're seeing right now. In order to not decipher and go through over 150 lines of code that we don't really know what they're doing.

 

Happy Tweening!

[Vagabond9 2 Likes (Newbie)]

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!

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

I'm not sure I follow 100% what you're trying to do so I'll offer some advice based on my best guess.

 

I assume  that you want a specific instance to last as long as the master timeline does that starts at zero seconds. In that case you can use the position parameter to add a final instance after you've added everything else to the timeline and the duration method as well:

https://greensock.com/docs/v3/GSAP/Timeline/duration()

 

tl.fromTo(
  "#box",
  {
    x: 10,
    y: 10
  },
  {
    x: 600,
    y: 100,
  }
)
.fromTo(
  "#box",
  {
    x: 600,
    y: 100
  },
  {
    x: 10,
    y: 100,
  }
);
// This will extend for the entire timeline
tl.to("#box", {
  backgroundColor: "#00E",
  duration: tl.duration(),
}, 0);

Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening!

[Vagabond9 2 Likes (Newbie)]

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

 

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

The tween to change the background position is just one or one tween for each child in the timeline?

 

If you need a tween for the background position for every child animation in the timeline, then your first approach should be enough for that. If you know the duration of that tween, you can set the same duration for the background one. Other option would be to store the background position animation in a variable or constant, add that tween to the master timeline. You could also not add it to the timeline and simply use the onStart callback in order to start it and then just pause it or kill it when the first animation is completed.

 

Sorry, but without a simple demo that clearly illustrate what you're trying to do and where you're getting stuck, mainly I'm guessing here.

 

Happy Tweening!

[Vagabond9 2 Likes (Newbie)]

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

[Vagabond9 2 Likes (Newbie)]

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

[Rodrigo 5,885 Likes (Superhero)]

Hi,

 

Yeah, stepped ease is great for that particular approach actually, great job!

 

The one thing it's not really needed is this:

var tween1 = tl.fromTo();

var tween1ani = tween1.to();

var tween2 = tl.fromTo();

var tween2ani = tween2.to();

The fromTo() and to() instances return a timeline, the original timeline you stored in the tl constant before in your code, so basically all those variables you're creating are actually the same tl instance you already created, so all those variables are completely unnecessary:

tl === tween1 === tween1ani === tween2 === tween2ani // -> true!

Here is a fork of your codepen without any of those:

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

 

Finally I strongly recommend you to animate x and y, instead than top and left, is far more performant.

 

Happy Tweening!

[Vagabond9 2 Likes (Newbie)]

Excellent, thanks for the help!