Mouse Follow with Ease

Earlier, we had a circle follow the mouse cursor around and learned all about how to make that example work. In this page, we are going to continue our look at having something follow the mouse cursor, but there is going to be a twist.

Hover over the blue rectangle in the following example to see what that we are going to be cooking up here:

Notice that our blue square follows the mouse cursor (just like our hapless circle earlier), but unlike our circle, it is in no hurry to get to where the mouse cursor is. It simply decelerates towards your mouse position without any care in the world:

In the next few sections, we’ll take a look at how this example works. This isn’t going to be a full on tutorial where you build this effect from scratch. A bulk of this code is almost identical to the Follow Mouse Cursor tutorial from earlier, so I don’t want to bore you with a rehash of what you’ve already seen. Instead, I am going to show you the full code, and we’ll just look at the highlights that are worth remembering for the future.

Onwards!