Interaction Demo

[00:00:00]
>> Sarah Drasner: So if we have a huggy laser panda factory, and actually this looks really weird on this screen. We should probably check it out on another screen. There's not like white outlines for real. So if we have a huggy laser panda factory, which is the place where huggy laser pandas are made.

[00:00:18]
So if you ever wondered where huggy laser pandas are made, they're made at this factory. So this is a desktop view of that huggy laser panda factory, and a mobile view of a huggy laser panda factory. And really, what they are, are three SVGs. That's one SVG, this is another SVG, another SVG, and they lock together like Legos.

[00:00:38]
And this one, this one section is flipped. And interlocked into this piece. So we have interaction plus responsive. I think this is, yeah, that kind of messes up the thing. So if I want to make the panda lasered, and make it a panda, and then, I wanna make it huggy and then I wanna change it for responsive.

[00:01:11]
And then, it kind of interlocks and changes, and this works on like old Windows phones that they no longer make. It works like on all mobile devices, the whole thing is 13 kilobytes. So, basically what we have is this like timeline that's repeated. One function that's repeated and it has all the, again, bloobie bits [LAUGH] and we've got like all of these gears turning around and stuff.

[00:01:41]
And for each one of these SVGs, we have an interaction and a thing that happens. So we have a function called Paint Panda, and then the Paint Panda restarts, so we start all of them. So let's look at some of the code. This function revolve has all the gears and all the things that are repeated.

[00:02:04]
And the way it's repeated is this thing called repeat:-1, that's how you loop in GreenSock. So if I want just one piece to repeat:-1, I could just repeat:-1 on this tl.to, that one. Or I can make the entire timeline for this section repeat, by passing it in as a parameter to that timeline.

[00:02:29]
Now I'll make like a function paintPanda, you know everybody's got paintPanda functions, and what I'll do is I'll pause this initially. So it kinda works similarly to the repeat:-1. I'm passing in as a parameter to this timeline, paused true. And then as soon as I click that one piece on the SVG, it restarts this one.

[00:02:51]
Yeah.