Animate and Center an Element to a Click Event with GreenSock
Animating an element to a click event is as simple as passing the x and y coordinates of the click event to the properties of the TweenMax.to call. To be able to center the element where the mouse clicks, you also need to adjust the special xPercent and yPercent properties so the element is properly offset.
Instructor: [00:00] Start by creating a div, I'm going to do this with #box and hit tab, that will have it emit expand a div with an id of box. Then I'll style that box with link, hit tab to expand that, and create a styles file, so styles.css and command-click and that will prompt VS Code to create that file for me, otherwise I could have gone to the explorer and created it.
[00:24] Now I can style this box and I'll give it a width of let's say 25 pixels, and a height, I can just type H tab of 25 pixels, and a background-color, so color and let's do one of the deep colors, deep-sky-blue. With that set up, I'm going to start my server with yarn -dev, and this is running at localhost:1234, paste that there, hit enter, and you'll see we have a box which is deep sky blue, which is 25 by 25.
[00:56] Switch over to your index.js file, I'm going to add a click event listener. So just on the document, I'm going to addEventListener("click"). Inside this event listener I'm going to tell TweenMax -- let's make sure to import that, VS Code did that automatically for me -- so TweenMax.to and look up the selector of the id of box, get it a duration of 1 second, and set the props to, let's just try x 100 and y 100. We'll hit save here, and once I click, you'll that the box moves to x 100 and y 100.
[01:35] Let's grab the client x and client y off of the event, so we'll just grab those off the event there and plop them into here, so that can be the client x and that can be the client y. Now we'll refresh and I'll click, and you can see that the box goes kind of to where my mouse is.
[01:56] To fix this gap between where my mouse is and where the box went to, let's go back into our styles and on the document, or on the body of the document, we'll just set the margin to . That'll fix that spacing between the mouse and where the box landed. The mouse meets the upper left-hand corner of the box.
[02:15] To center the box itself, we'll go into the index, and we're going to start the box with a value where it translates it to the left and up. We'll select the box and use the values of x%-50, and y%-50, we'll hit save here, and now when I refresh and click, you can see that the box moves exactly to where the mouse is.
[02:40] If I select the box and inspect it, you can see what happened is it's translating 50 percent to the left and up, and when I click, it keeps that translation so that the box lands right in the center of your mouse.