29 JavaScript Image Effects

This 3D Glass Photo Lens creates a stunning, tactile digital object - a thick glass block that refracts user-uploaded photos. Built with Three.js, it simulates the physics of light (transmission, IOR, thickness) to produce high-fidelity glass renders directly in the browser. Users can change the lens shape (Heart, Square, Hexagon), adjust the glass tint, and even modify the environmental lighting to see how reflections dance across the beveled edges.

This Ink Transition Scroll Effect brings digital storytelling to life by mimicking the organic spread of ink on paper. Designed for a biography page, it reveals images using a “splatter” transition triggered by scrolling. It combines ScrollMagic for timing, GSAP for smooth text entry, and CSS Sprites for the complex ink mask animation.

This Interactive Canvas Liquid Image Distortion transforms a static image into a playful, fluid surface. By subdividing the image into a grid of tiny cells, the script manipulates the texture coordinates of each cell in response to mouse movement. The result is a “jelly-like” or refractive glass effect where the image appears to warp and ripple under the user’s cursor.

A calm static image that, upon hover, jitters, splits into RGB channels in bands, and slowly zooms in, evoking a digital glitch or cyberpunk atmosphere.

An interactive “liquid” image distortion effect powered by Three.js and custom GLSL shaders.

A visually dynamic and impressive effect where hovering over a static image transforms it into a complex, 3D-like collage, showcasing the capabilities of CSS transitions and imperative loading control.

A unique, visually impressive effect where the user moves a “liquid,” morphing lens to compare two scenes, demonstrating advanced use of SVG and DOM manipulation for visual UX.

A highly specialized, GPU-accelerated image transition component built on Three.js.

A high-end, editorial-style web design where content appears smoothly and coordinately, creating a sense of premium quality and attention to detail.

A real-time glitch art generator powered by p5.js, manipulating image data at the pixel level.

A dynamic, broken image featuring twitching scanlines, color channel shifts, and geometric distortions, reminiscent of digital signal interference or vintage TV static.

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.

Experience a dynamic, generative glitch effect where the visuals are created in real-time within the p5.js draw() loop. The animation combines a sequence of pixel shifts, line flows, and RGB channel separation to create a unique, non-repeating visual every time the code runs.

This captivating slideshow is powered by a gsap.timeline that orchestrates a sophisticated “wipe” transition using an SVG <mask>. The timeline animates the xPercent of dynamically generated <rect> elements to reveal an image, while a simple setInterval function cycles through an array of content, updating the text and image source every 10 seconds to create a seamless, self-playing visual loop.

This captivating waterfall-style image reveal showcases a powerful synergy between technologies. A JavaScript for loop procedurally generates a series of <rect> elements within an SVG <mask>, which are then animated by GSAP in a continuous, yoyo-ing loop. The mesmerizing, chaotic effect is achieved using a random stagger (from: 'random') and a dramatic expo.easeInOut ease, creating a seamless and performant animation.

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.

The demo uses GSAP to programmatically control the CSS mask property and applies the ease: steps() function for precise, frame-by-frame switching between 20 sprite mask states, creating a drawing or layered revelation effect.

A high-performance 3D gallery leveraging WebGL for rendering an interactive image grid with a reflective (shader) effect and realistic cursor-driven lighting, implemented atop LUME.

Dynamic control over GPU effects, including 3D-deforming ripples (Vertex Shader) on click and animated reveal masks by smoothly driving shader uniforms with GSAP timelines.

A demo of the scroll zoom effect via dynamic element visibility calculation and utilizing the Intersection Observer API for performance enhancement.

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 is a powerful example of using WebGL for image processing directly on the GPU with shaders, which allows for impressive effects like a lens and light flares with high performance.