Wrapping Up

[00:00:00]
>> Yeah,
>> Clip path, that's pretty sweet. I've seen a lot of like, a background color full div that kind of just moves out and doesn't reveal as well for that effect. But I think that was pretty sure.
>> Yeah, so, that might be the more performant way of doing it.

[00:00:19]
But clip path gives you a lot more freedom. There's one thing that actually I don't know why I didn't show this before, but one of my pens uses clip path in a very very crazy way. Here I'll show you what I mean. Yeah. So, actually I don't know if this uses.

[00:00:45]
Yeah, so it's what if I turn the shadows off, it is a lot smoother. This one took a lot. [LAUGH] just because I needed to also manipulate the shadows on the different elements. So that was pretty fun. Also this cat on the string. So this is not SB or anything like that, each one of this is actually a A just a div.

[00:01:18]
And so basically, you can think of a div inside of the div. And if you move that second div down and then rotate it a little and then do the same thing did rotate it a little.
>> You kind of did that with the animation where it says animation or box the second last one you did.

[00:01:35]
Where you would move the box and an animation would come inside and then.
>> Yeah, sort of but, so that one actually works the opposite of this one because we don't want both of them moving at the same time. Because we want to individually control each one.
>> Well yeah, there was a delay between when animation came in.

[00:01:57]
Admitted it looked like the box was pushing the writing.
>> Yeah, so I started off with, SAS variables for doing things like that. Because what you could do is say like, each one in it just add a certain value so that it looks like it's sort of doing a delay.

[00:02:16]
CSS variables can do the same thing. So that's why the main points that I wanted people to bring home from this workshop are CSS variables, data attributes. And just how you could use them to better organize your styles into animations.
>> So this is in HTML canvas, [CROSSTALK]

[00:02:35]
>> No, this is a-
>> Just doing like a Photoshop with layers basically yeah, that's great thanks.
>> Okay, now I understand what you're getting each layer and kind of move it like he's sitting behind and underneath.
>> Yeah, this is yep all all SVG Do, so, this one was fun to do too win PokemonGo was the thing.

[00:02:55]
I think it's a still thing, people still do it, but like, yeah, so, [LAUGH] Yeah. All right, so I hope that you all enjoy the workshop and thanks for sticking around for the impromptu dribble demo. [LAUGH] Thank you.
>> [APPLAUSE]