Transcript from the "Draggable" Lesson
[00:00:00]
>> Sarah Drasner: There's this thing called Draggable, that you can use with GreenSock. So Draggable is really easy to work with. It's a plugin that we mentioned before in those code pen safe plugins. So it's a device enabled for touch screen. You can impose bounce. So you can either have the bounds be like this div of a container, or you can say, top left width and height, and kind of impose bounds that way.
[00:00:27] You can have momentum, if you have the ThrowPropsPlugin as well. You can do hit test to see if elements hit each other. If you ever want to make a game or something, you can use it that way. It honors transform origin, which is really cool, a lot of other Draggable things don't.
[00:00:41] It still works on transformed elements, you can lock an axis, it's GPU accelerated and request animation frame driven. And really, all you need to make it work Is this Draggable.create. So if I have a Mr. Potato Head, I can kind of move, okay, I'm gonna make myself here, I don't have a mustache.
[00:01:00] I'm gonna put this eyes on there, and I'm like, generally, kind of smiley, and then now I have brown hair, but before I had blond hair. So I'll just put both. And a hat, I'll put that up there, okay? So I could also decide I needed contacts, and put blue eyes in there.
[00:01:22] So you could kinda play around with it, it's not actually that much code to make this work. I'm just like, grab everything in there. They each have to be separate, right, because I want them to move separately. So I'm like, go get all of them, and Draggable.create them, and then make them fun to play with for people who are immature, like me.
[00:01:46] [LAUGH] And there's a bunch of nerds on CodePen that do these creative coding weekends and challenges, and there was a pastel dots weekend. So I made these little guys, and really, I could've made them hit testable and things like that, but I kind of liked when they, you know, landed on each other, and went over each other.
[00:02:09] And again, code is super simple. I'm staggering back and forth. I'm just basically saying, repeat negative one. This part I didn't mention before. Yo-yo true will make it go back and forth, if it's repeated. So I'm just saying, do this and then do this, and then do this and then do this.
[00:02:29] And then Draggable.create all of them and then we're done, and we have this pastel dots. So there's also call back, so you don't just have to work, like if you wanna, you don't have to just play with hit test, you could work with all sorts of stuff. You could work with onPress, onDragStart, onDragEnd, on Release.
[00:02:48] You could really make a game with Draggable. So this refers to the Draggable instance itself, so you don't have to wonder what this is referring to. Have you ever heard that joke that's like, every time I work with JavaScript I wanna say this is bullshit, but I don't remember what this refers to.
[00:03:06] [LAUGH] So this is, that's kind of nice that you know what this is. So it also dispatches events, so you can do at event listener, and that kind of stuff.
>> Sarah Drasner: It's loading, loading. This is one of GreenSock's pens, but I really like it. It shows how you can have droppable logic.
[00:03:27] So with hit test, you can kind of see, but one thing about this is, watch, it's not actually happening until 50% or more across. Which is really great, because when you're working with elements inside of the dom, the dom will always see everything inside of it as a box, and we're going to dive into that in more detail a little bit later on.
[00:03:52] But if you have a star or something that's pointy, it will look like it's not hitting each other until a little while, even though it is. So sometimes you have to compensate for what you see with your eye, is different from what the dorm actually thinks is going on.
[00:04:09] And there is also this new thing that is called Snap Point, so you can throw these around and they'll like kind of come back. That's pretty cool. Other possibilities for game development, if you want. And, of course, we have a Draggable to create a timeline interaction. So I basically created a Draggable thing with this gear, and I set it to 360, not 100.
[00:04:40] And then I plotted that to the progress of the timeline. And so then, you can steer a ship, and all sorts of stuff with it. And then Play is really what you would think, it just restarts the timeline. That's just kind of a fairly normal interaction. So here we're setting all of those to visibility: visible.
[00:05:00] We make the entire animation first, and then once we have access to that master, I say Draggable.create, bounds from 0 to 360, and onDrag master.progress this.rotation over 360, cool. We can also do interpolation with style bindings. There's this Pen. This is done with Vue and SVG. So basically I'm changing the coordinates, and I'm tracking the coordinates, and using those inline in this inline style to change the perspective origin.
[00:05:35] If you don't know what perspective origin is, it's a really cool thing to check out. So I have in the instance, I start with zero. You know, x at zero, y at zero, and then I change it bound to eclient x, and then I change that, based on the perspective origin.
[00:05:52] So we can also do things like this cute little Wall-E. I think he makes noises. [SOUND] Chrome made this major change recently, where you can't play audio unless the user interacts with the site. So a bunch of my pens broke this morning. [LAUGH] So if you're just automatically playing audio, it won't let you.
[00:06:13] You have to trigger the audio. So I think there's another sound that's not happening right now, but the one that I trigger, [SOUND] [LAUGH] Happen. So basically Wall-E has this repeated thing, where he kind of looks around, and he kind of blinks and stuff, because regular things in regular life don't just sit there, still.
[00:06:33] And then, basically, for this animation. [SOUND] For this animation, I have his arms reaching out, so I basically made the animation, with his arms reaching out. And then I pause it, and then I scrub that animation, as you scrub from here to here in the client. And then when I get past that certain point, [SOUND], I flip him with the scale negative one on the x-axis.
[00:07:02] And so he looks over here instead, and he stops moving his arms.
>> Sarah Drasner: So basically, this is mouse move coordinates. There's a lot more stuff going on than that, but this is kind of where the magic happens, where I have this progress, and I have the coordinates, but I keep it paused.
[00:07:19] Cuz I don't want the animation to play from that point, I want it to stay paused, and for us to scrub the progress. If you don't have it paused, and this is something I ran into, it will keep trying to play, and then it gets this stuttery thing.
[00:07:33] I'm like, what is going on? So you need to chain that pause with the progress.