70+ JavaScript Hover Effects (Page 2)

An emotionally charged and technically complex component that uses kinetic animations simulating digital glitches or geometric transformations to dramatically reveal hidden content.

A visual illusion of “negative space” where the cursor acts as a physical object parting a dense curtain of threads, revealing the static text underneath.

A sophisticated magnetic navigation menu that uses JavaScript to map mouse proximity to CSS variables, driving smooth translations via translate. It features a configurable “follow” effect where a background pseudo-element glides between items based on bounding box coordinates calculated on hover.

An elegant, minimalist section featuring smooth typographic animation and interactive elements that engage the user by revealing visual context upon reading.

On hover, letters scatter chaotically, creating a dynamic, interactive explosion of text without complex animation libraries.

A high-tech, visually rich button that reacts to interaction with a burst of light tracing its borders, making the interface feel alive and responsive.

This interactive portfolio showcases a masonry-style layout built with two overlapping CSS Grids, where grid-row: span and grid-column: span create the complex pattern. The key interaction is a unique “spotlight” reveal effect on hover, powered by a JavaScript-controlled SVG <clipPath> that dynamically updates the position of a <circle> mask to follow the mouse.

Explore a variety of sophisticated hover effects, where complex animation patterns are created using advanced CSS selectors like :nth-child(-n + 3). These selectors target specific ranges of “cells” generated by Splitting.js.

This interactive grid showcases a mesmerizing “gooey” or “metaball” effect, achieved by applying an SVG filter to a liquid-like blob that smoothly follows the cursor. The entire experience is powered by a sophisticated combination of technologies: requestAnimationFrame for the performant cursor tracking, and SCSS using @for loops and custom functions to create unique, non-repeating @keyframes for each block’s animation.

This interactive digital collage is driven by a single, reversible gsap.timeline that animates dozens of absolutely positioned <img> elements into a cohesive illustration on hover. A key feature is the sophisticated text reveal, powered by GSAP’s SplitText plugin, which creates a fluid ‘waterfall’ effect. The entire composition is built to be fully responsive, using a custom SCSS --unit variable based on vmin to ensure the complex layout scales proportionally.

Live demo showcasing dynamic mix-blend-mode and background-blend-mode combinations. Interactive 3D tilt and SVG turbulence distortion trigger on hover.

A texture morphing effect with 3D rotation on hover, implemented using Three.js and shaders (GLSL). The fragment shader uses the snoise3 function (simplex noise) to create an organic mixing mask for blending two images.

An interactive 3D card effect where JavaScript tracks pointermove, calculates the relative cursor position, and passes it to --ratio-x and --ratio-y CSS variables, while CSS uses calc() to drive rotateX and rotateY.

Explore an interactive SVG fingerprint animation brought to life by the GSAP DrawSVGPlugin and a clever use of a GIF-textured stroke. Hovering over the button triggers the layered, staggered path animation for a satisfying “scan” reveal.

Explore a dual-interaction card where a 3D parallax responds to mouse movement, while a click triggers a “camera flash” and a comic-style text reveal. The hover effect uses throttled JS for performance, and the click animations are powered by GSAP.

A demo of how GSAP and Canvas 2D work together to create a grid of elements that react to the cursor using smooth vector transformation.

An implementation of Mouse Interaction with a grid of elements: each circle smoothly interpolates its radius towards a target using an ease factor for liquid-like animation, producing a smooth repulsion effect.

The Screen-to-UV technique calculates cursor distance to cells in an isometric grid; the result controls a CSS variable to generate a “living” 3D surface effect using pure CSS/JS.

This interactive portfolio leverages GSAP for smooth animations and a text scramble effect on hover, plus a dynamic background image that changes with a parallax effect for each project.

Technically, this GSAP and vanilla JS demo creates a multi-layered parallax effect, where each layer responds to mouse movement, and a drag gesture adds complex 3D rotation. The code is flexible, allowing you to switch between different shapes and visual styles.

This demo showcases a dynamic hover effect using CSS masks and JavaScript to reveal a stylized version of an image. The effect tracks the mouse, dynamically updating the radial gradient mask and providing a unique interactive element.