Motion Design with CSS Sequencing
This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Sequencing" Lesson
>> 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.
[00:00:29] 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.
[00:00:55] 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.
[00:01:17] 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 gonna use a background image for something, you have to change the opacity of the whole thing if you wanna 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.
[00:02:22] All right, good question. Hope the answer was good too. Now, not every element that we wanna animate is gonna go simply from one state to another, on off, etc. Sometimes we wanna 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.
[00:02:50] 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.
[00:03:09] 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.
[00:03:51] 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.
[00:04:18] 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.