Chaining state animations together

I have a container with two components. A button and a gray rectangle. I'm trying to a "progress" effect where the gray rectangle gradually expands to fill the button. I did it (sort of) in this prototype. I want is to have an animation timeline that chains a bunch of things together. I approximated this with a sequence of callbacks, but it's a little clumsy.

I'd imagined there should be four states in my container: Ready, Just Started, Almost Done and Done with the following transitions.

Ready:The gray rect is invisible

Ready ->Just Started: The gray rect becomes visible, goes to width 10 and has the left corners rounded, but the right corners not rounded

Just Started -> Almost Done: The gray rect linearly slides to width 194 ... almost covering the button

Almost Done -> Done: The gray rect gets rounded corners on the right and expands to 200 pixels wide, fully covering the button

Done -> Ready: The gray rect opacity fades to 0

So I want to animate several properties:

- Visibility

- Width

- Rounded rects

- Opacity

And they each have different timing. I thought I would do it with several different states and have one state transition automatically trigger the next. I tried this by using the lightning icon at the end of the state transition timeline and adding an action to go to the next state. The result was my gray rectangle flashed to about half the width of the button then disappeared. Somehow it wasn't going through my animations in sequence.

There's something I'm not understanding in how to chain animations so that when one finishes, the next begins.

I approximated the effect by having an "On state transition end" interaction callback that animated the gray rect, first changing it's size and then, in a second callback, moving to the Done state. But I'd rather use states. It's easier to visualize the animation timeline that way.


Please sign in to leave a comment.