Andy from Webcrunch

Subscribe for email updates:

Portrait of Andy Leverenz
Andy Leverenz

September 26, 2019

Last updated November 5, 2023

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

Link this article
Est. reading time: 2 minutes
Stats: 1,527 views

Collection

Part of the Let's Build: With JavaScript collection