The full video and many others like it are all available as part of our Frontend Masters subscription.

Rachel Nabors

Rachel Nabors is a CSS animations fanatic and award-winning cartoonist. A regular conference speaker, she ignites new technology with her experience in visual storytelling.

Rachel Nabors

Web Animation

After answering a couple audience questions, Rachel introduces sequencing or “animation stacking”. Sequencing is the process of putting a delay on the second animation so it won’t run until after the first animation is completed.

Get Unlimited Access Now

Speaker 1: The question is from Kevin. And it is instead of using tuna clones what would be the context you would recommend tuna being singular and having Skrollr switched to a different background?
Rachel Nabors: So the issue with tuna is that tuna in the instance back there, you saw that tuna was actually composed of three different tunas.

There was the line work, there was a black tuna that blotted out a glowing layer as well. So three tunas, the line work, the glow and the blackness. Now, could you have made that a single element and had Skrollr change that into tuna? The issue is that you need those three elements.

I can't actually think of a way that I could do it with only two, without having maybe say a pseudo-class with a background image of the grinning tuna. And then the regular element of the black tuna. And then using Skrollr to animate the opacity of well, you can't use Skrollr on pseudo-elements so you can't.

Pseudo-elements are CSS only thing. All right so, you can't change the background position on the single element with Skrollr without it actually scrolling the background element in a direction. So in this case with Skrollr you would have to use at least two elements, physical elements to do it.

Rachel Nabors: I hope I answered his question. It's a good question but there are physical limitations to what you can do with Skrollr. Doesn't work on pseudo-elements and you can't use background, you can't fade background positions. So if you're going to use a background image for something, you have to change the opacity of the whole thing if you want to fade.

Speaker 3: What if you change the actual background image?
Rachel Nabors: You can't animate a background image change. It's one of those unanimatable things like display. But that's a good question. What would the animation look like?
Speaker 4: You can't animate an image source.
Rachel Nabors: Nope, can't animate an image source on a background.

All right, good question. Hope the answer was good too. Now, not every element that we want to animate is going to go simply from one state to another, on off, etc. Sometimes we want to run two different animations in rapid succession. What do those look like? Well, there's this one thing we can do called, I like to call it actually animation stacking.

Say we have the sequenced-thing. We have an element want to run two animations one after the other on. We could do this technique called animation stacking which is where we put a delay on the second animation so that it runs after the first is completed. Here sequence1 takes one second for each iteration, it runs twice.

So sequence2, it has a two second duration, two second delay. Because it's waiting two times one second before it runs. This works all right, I've used it before. Specifically on this particular animation.
Rachel Nabors: Notice he goes from walking to running. If we take a look at the Editor, we can see just in the CSS that we've got these walk-cycles, a walk-to-run cycle and a run cycle stacked on top of each other.

So the walk-cycle he does it twice to one second long animation. So the walk-to-run sequence doesn't run until two seconds later. And the run-cycle has a two point seventy five second delay on it, because the walk-to-run cycle is 0.75. So it keeps that duration, the delay keeps being accumulative addition of the previous durations behind it.

And it's all very simple, I'm sure if you build a fancy SAS mix in to handle your animation stacking for you but there are some downsides.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now