40+ JavaScript Image Effects

Generative Glitch Effect with p5.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.

See the Pen Generative Glitch Effect with p5.js.

SVG Mask Image Slideshow

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.

See the Pen SVG Mask Image Slideshow.

SVG Mask Waterfall Image Reveal

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.

See the Pen SVG Mask Waterfall Image Reveal.

Image Displacement with Three.js

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.

See the Pen Image Displacement with Three.js.

GSAP Sprite Mask Animation

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.

See the Pen GSAP Sprite Mask Animation.

LUME Shiny 3D Image Grid (Webgl, Three.js)

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.

See the Pen LUME Shiny 3D Image Grid (Webgl, Three.js).

Animating WebGL Shaders with GSAP

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.

Efficient Image Scroll Zoom Effect

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

See the Pen Efficient Image Scroll Zoom Effect.

Repetition Image Animation

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.

See the Pen Repetition Image Animation.

Liquid Glass Shader

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.

See the Pen Liquid Glass Shader.