Let’s Build with JavaScript – Using Mouse Events To Animate Text

In this installment of my Let’s Build with JavaScript series I talk about using mouse events to animate text.

This tutorial is heavily inspired by a video from Wes Bos’ course JavaScript 30 which I highly recommend for a crash course in JavaScript.

View the CodePen

We’ll be building a text-shadow animation that takes place on mouse hover. As you move your cursor over a containing div the text can animate in real-time thanks to JavaScript events. We’ll target the mousemove event specifically to hook into coordinates defined in the browser relative to where your cursor lands on the screen. Combine some math and some ES6 and we’ve got a pretty cool little animation effect.

Relative links:

The Series So Far