Staggered Animation

3 minutes
Share the link to this page
Animations that are broken into smaller motions, where some of the motion is delayed. The smaller animations may be sequential, or may partially or completely overlap.


Hello, in this video I'm going to show you how to set up staggered animations. And this is basically when you have an animation then the next one the next one runs, I'm going to keep this in points have two color animation. I've already got a color tween animation, which I actually implemented in the previous video. This is why it does start red, and it transitions to blue either restart red goes to the purple phase, and it's ended up. So what we want to do is have an evaluation and once it hits the blue color, we want it to transition to green with slightly different controller. So we want a duplicate of the controller and duplicate of the animation.

And in the previous video, this was single ticker provider state mixin. We'll need it to be ticker provider statements and we needed to allow us to support multiple now what we're going to do is do Locate this channel control two for the time only 10 to two pounds of two second, people have the tongue the same, that's totally up to you. Next, we all go into sort of, you know, do kidness as well, not quite because this creates it, we don't want it to create it until the end of it. And the reason is, we're going to set it linked dynamically to the color of the end animation of this one so that we do matter what we change is to always be dynamic, and we don't want it to start until this is finished. What we can do is add a status listener, which takes the variable of status, which as you guessed, it allows us to check the status of the nation so we can say if status equals any nation status complete and you can check the other ones as well.

What we are going to do in here is essentially created this. This much of it, Nicola, and it's going to be animation to now it's going to be controller two, and valdan the input animation to value. This is going to equal to the first animation dot value. And that way no matter what this ends that this will begin at that color. So it makes it dynamic. And now we can simply just do underscore control to dot forward.

So now if we was to hot restart it, start at a red color, transition to a blue color over four and a half seconds, then over two seconds transition to a green color. Oh, I never changed it. Did I change? No change here. red, green, blue, and so we didn't know The animation Hope it did work, it's just I didn't change the color, so there's no visual difference. So now again, from red to blue, and from blue or two seconds to green, we're hitting blue.

No transition into the green color. And that's how you do staggered animation. You can do as many as you want, you can do some crazy stuff I've done to color tween and mentioned, you could do all sorts of animation and I'll recommend doing that as an extra tab. You don't have to be linked to the same thing either. So once one animation is finished, maybe on the color of the background, and Nova animation, maybe changing the font size of all the text could begin is totally up to you. If you have any questions though, feel free to shoot me a message.

And as usual, I look forward to seeing you in the next video.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.