Introduction to Vue.js

Introduction to Vue.js Connect to Interaction


This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Connect to Interaction" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Using a coding example to make a robot illustration life-like, Sarah shows how to connect mouse events and animations through Vue.js.

Get Unlimited Access Now

Transcript from the "Connect to Interaction" Lesson

>> Sarah: All right, let's connect things to interaction. We've got this little Wally guy. [SOUND] He's gonna try to find his cockroach friend. [SOUND] And you know, we can make him go up and down. We had kind of talked about earlier about how great Vue is for interaction. We did some style bindings.

[00:00:21] Pretty easily, all we did was hook up x and y, and plot them to eCLientX, eCLientY. So there's tons of stuff that we can do. One thing about this animation is we've got a part that's repeating, it's just making him look a little lifelike, he's just kind of bobbing his head, moving it around, and blinking every once in a while, and he does that no matter what you do.

[00:00:43] But usually people are moving around, so they don't notice that that's just constantly occurring. Then we have these arms, that extend out as the cockroach moves across the page, right? So what we did for each one of these Is for the bopping around, and moving around, we plugged into the mounted hook.

[00:01:06] Because we want that to start right as that component loads, and we want a timeline to fire that has the animation logic for him to move around, and blink, and things like that. And that's just a repeated thing that we have hanging off of that mounted hook. The other thing that we're gonna do is, we built out an animation of his arms going like this, then we paused it, and we plotted the progress of the animation along with those x, y values that we had access to.

[00:01:37] So just like we used them for class and style bindings, we take the whole animation, we do the whole animation at the get go, and that's kind of easier to work with. We're just like watching his arms go like this, and that's easier to figure out. Then we stop it, then we say, okay, let's take this progress and move it along, as you're moving your cursor.

>> Sarah: So in here we have that @mousemove= "coordinates". That was the thing that we had earlier. We had kind of mentioned the @mousemove= "coordinates" in that first thing that we did. Then we have this v-bind:class, and we have flipped, isFlipped because we wanna track. If we get to a certain point in a location, we want his head to flip around and actually follow that cockroach.

[00:02:27] As we got to the other side of the page, he had to kinda turn his head. So we just translated it, flipped it, negative one, on that axis. So that is that. Then we have a bunch of starting things. We had flip is false when we first started, we had audio play was false when we started.

[00:02:50] So there is something that triggers that event as well. We have the x and y values and we have the start arms which is the point that progress where that animation is initially zero. We're going to, in our coordinates, where we are passing e. We have access to e client x and e client y.

[00:03:10] We've got some logic here to figure out, basically, if we are going to play this sound, if we are going to flip him. And, this is this.startarms.progress. And we're plotting the progress of an animation that we also have in our methods to that. So it looks kind of confusing but basically the logic that I was explaining before is how that is all working.

[00:03:34] So the looping I think anytime you want something looping continuously you might want to plug into something like created or mounted, so that as soon as that thing is available, we're starting to fire that animation timeline. This repeat: -1 will allow us to start it right away, or sorry loop it through the whole thing.