# gl-transitions

> The open collection of GL Transitions: 125 GLSL shaders that turn one image into another as `progress` goes from 0 to 1. Each one is also published as an SkSL runtime effect for Skia. This document describes gl-transitions@1.76.1 (npm).

Every transition is GLSL (WebGL 1 / GLSL ES 1.00) that implements `vec4 transition(vec2 uv)`. The host provides:

- `float progress`: 0.0 shows only the outgoing image, 1.0 only the incoming one
- `float ratio`: output width / height
- `vec4 getFromColor(vec2 uv)` and `vec4 getToColor(vec2 uv)`: sample the outgoing and incoming images (uv in [0, 1], origin at the bottom left)
- one uniform per parameter, set to its default unless the user picks another value
- one `sampler2D` per extra texture, for the few transitions that list `textures`

## Docs

- [Full catalog](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/llms-full.txt): every transition with its description, tags, parameters and source links
- [Agent Skill](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/skills/gl-transitions/SKILL.md): how to pick a transition and wire it into WebGL, Skia, FFmpeg or editly
- [Catalog JSON](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/gl-transitions.json): the same data as an array of objects (name, glsl, params, tags, ...), typed in index.d.ts
- [Package README](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/README.md): files of the npm package and the SkSL contract
- [Specification](https://github.com/gl-transitions/gl-transitions#gl-transition-specification-v1): GL Transition Specification v1

## Transitions

- [AdvancedMosaic](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/AdvancedMosaic.glsl): Both images break into large blocks that blend, then sharpen into the incoming image (pixelate, mosaic, blend)
- [BlockDissolve](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/BlockDissolve.glsl): The incoming image appears in small random blocks (dissolve, blocks, noise)
- [BookFlip](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/BookFlip.glsl): The outgoing image turns like a book page from right to left, revealing the incoming one (page, flip, 3d)
- [Bounce](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Bounce.glsl): The outgoing image drops out of the frame with a few bounces, revealing the incoming one (bounce, slide, vertical, shadow)
- [BowTieHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/BowTieHorizontal.glsl): Two triangles grow from the left and right edges into a bow tie that reveals the incoming image (wipe, shape, horizontal)
- [BowTieVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/BowTieVertical.glsl): Two triangles grow from the top and bottom edges into a bow tie that reveals the incoming image (wipe, shape, vertical)
- [BowTieWithParameter](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/BowTieWithParameter.glsl): A bow-tie wipe with an adjustable shape that can run in reverse (wipe, shape)
- [Box](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Box.glsl): The outgoing image shrinks into a box, toward the center or a corner, revealing the incoming one (box, zoom, shape)
- [ButterflyWaveScrawler](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/ButterflyWaveScrawler.glsl): Wavy, color-separated ripples scramble the outgoing image into the incoming one (wave, distort, chromatic)
- [CircleCrop](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/CircleCrop.glsl): The outgoing image closes into a circle over a background color, then the incoming one opens from it (circle, iris, shape)
- [ColourDistance](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/ColourDistance.glsl): Pixels switch to the incoming image in order of how close their colors are (blend, color)
- [CrazyParametricFun](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/CrazyParametricFun.glsl): The outgoing image is pulled along a parametric curve into a psychedelic swirl (distort, psychedelic)
- [CrossZoom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/CrossZoom.glsl): A crossfade through a strong zoom blur (zoom, blur, blend)
- [DefocusBlur](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/DefocusBlur.glsl): A crossfade through an out-of-focus blur (blur, blend)
- [Directional](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Directional.glsl): The incoming image pushes the outgoing one out in a given direction (slide, push, directional)
- [DirectionalScaled](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/DirectionalScaled.glsl): Like Directional, with both images scaled down while they slide (slide, push, zoom, directional)
- [DoomScreenTransition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/DoomScreenTransition.glsl): The outgoing image melts down in uneven columns, like the Doom screen wipe (melt, columns, retro)
- [Dreamy](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Dreamy.glsl): A crossfade with a gentle wavy distortion (wave, blend)
- [DreamyZoom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/DreamyZoom.glsl): Zooms and rotates into a bright flash, then out to the incoming image (zoom, rotate, flash)
- [Drop_Zone_Flicker](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Drop_Zone_Flicker.glsl): A flickering glitch with RGB offset, ghosting and scanlines that flashes back to the outgoing image (glitch, flicker, chromatic, scanlines)
- [EdgeTransition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/EdgeTransition.glsl): Both images fade through black with their edges glowing (edges, fade)
- [FilmBurn](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/FilmBurn.glsl): Glowing film-burn light leaks wash over the image and reveal the incoming one (burn, film, light-leak)
- [Fold](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Fold.glsl): The incoming image unfolds from the left while the outgoing one folds away to the right (fold, slide, horizontal)
- [GlitchDisplace](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/GlitchDisplace.glsl): Blocks of the image are displaced in a glitch that flashes into the incoming image (glitch, displace)
- [GlitchMemories](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/GlitchMemories.glsl): A crossfade with glitchy, color-shifted blocks (glitch, chromatic, blend)
- [GridFlip](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/GridFlip.glsl): The image splits into a grid of tiles that flip one by one to the incoming image (grid, tiles, flip)
- [HSVfade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/HSVfade.glsl): A crossfade through the HSV color space that cycles through hues (fade, color, hue)
- [HorizontalClose](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/HorizontalClose.glsl): The incoming image closes in from the top and bottom edges toward the middle (wipe, split)
- [HorizontalOpen](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/HorizontalOpen.glsl): The incoming image opens from a line in the middle toward the top and bottom edges (wipe, split)
- [InvertedPageCurl](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/InvertedPageCurl.glsl): The outgoing image curls away like a page, revealing the incoming one (page, curl, 3d)
- [LeftRight](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/LeftRight.glsl): The outgoing image shrinks away to the left while the incoming one slides in from the right (slide, zoom, horizontal)
- [LinearBlur](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/LinearBlur.glsl): A crossfade through a blur (blur, blend)
- [Mosaic](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Mosaic.glsl): The view pans across a mosaic of rotated tiles from both images and settles on the incoming one (mosaic, tiles, zoom)
- [Overexposure](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Overexposure.glsl): A crossfade through a washed-out, overexposed white (flash, light, fade)
- [PolkaDotsCurtain](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/PolkaDotsCurtain.glsl): The incoming image appears through growing polka dots (dots, pattern)
- [PuzzleRight](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/PuzzleRight.glsl): The image splits into a grid of tiles that flip one by one to the incoming image (grid, tiles, flip)
- [Radial](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Radial.glsl): A radial wipe that sweeps around the center like a clock hand (wipe, radial, clock)
- [Rectangle](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Rectangle.glsl): A rectangle grows from the center to cover the outgoing image, then shrinks to reveal the incoming one (box, shape, iris)
- [RectangleCrop](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/RectangleCrop.glsl): The outgoing image shrinks into a small rectangle over a background color, then the incoming one grows from it (box, iris, zoom)
- [Revolve_Left](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Revolve_Left.glsl): The outgoing image swirls and zooms with motion blur into the incoming one (swirl, zoom, rotate, blur)
- [Rolls](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Rolls.glsl): The outgoing image rolls away around a corner, revealing the incoming one (rotate, roll)
- [RotateScaleVanish](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/RotateScaleVanish.glsl): The outgoing image spins and shrinks away over the incoming one (rotate, zoom, spin)
- [SimpleFlip](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/SimpleFlip.glsl): The outgoing image flips around the vertical axis into the incoming one (flip, horizontal)
- [SimpleZoom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/SimpleZoom.glsl): Zooms into the outgoing image, then fades to the incoming one (zoom, fade)
- [SimpleZoomOut](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/SimpleZoomOut.glsl): The incoming image zooms out into place while fading in (zoom, fade)
- [Slides](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Slides.glsl): The outgoing image slides out, or the incoming one slides in, toward an edge, a corner or the center (slide, directional)
- [StarWipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/StarWipe.glsl): A growing star reveals the incoming image (wipe, shape, star)
- [StaticFade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/StaticFade.glsl): Cuts to the incoming image halfway, hidden behind a burst of TV static (static, noise, retro)
- [StereoViewer](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/StereoViewer.glsl): Both images shrink into rounded cards that swap, like a stereo viewer toy (cards, zoom, retro)
- [StripDatamoshGlitch](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/StripDatamoshGlitch.glsl): A datamosh glitch: torn strips, chroma shifts and scan noise drag the outgoing image into the incoming one (glitch, datamosh, chromatic)
- [Swirl](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/Swirl.glsl): Both images swirl around the center while crossfading (swirl, rotate, blend)
- [TVStatic](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/TVStatic.glsl): Cuts to full-screen TV static, then to the incoming image (static, noise, retro)
- [TilesWave](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/TilesWave.glsl): The incoming image is revealed tile by tile in a diagonal wave (tiles, wave, wipe)
- [TopBottom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/TopBottom.glsl): The outgoing image shrinks away upward while the incoming one slides in from the bottom (slide, zoom, vertical)
- [VerticalClose](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/VerticalClose.glsl): The incoming image closes in from the left and right edges toward the middle (wipe, split)
- [VerticalOpen](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/VerticalOpen.glsl): The incoming image opens from a line in the middle toward the left and right edges (wipe, split)
- [WaterDrop](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/WaterDrop.glsl): Ripples spread from the center like a drop falling into water, crossfading to the incoming image (ripple, water, blend)
- [ZoomInCircles](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/ZoomInCircles.glsl): Concentric rings of the outgoing image zoom at different speeds before revealing the incoming one (zoom, circle)
- [ZoomLeftWipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/ZoomLeftWipe.glsl): Zooms into the outgoing image, then the incoming one wipes in from right to left (zoom, wipe, horizontal)
- [ZoomRigthWipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/ZoomRigthWipe.glsl): Zooms into the outgoing image, then the incoming one wipes in from left to right (zoom, wipe, horizontal)
- [angular](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/angular.glsl): A wipe that sweeps around the center from a starting angle (wipe, radial, clock)
- [burn](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/burn.glsl): A crossfade that brightens toward a color in the middle (fade, color, flash)
- [burn0](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/burn0.glsl): The outgoing image burns away in noisy, glowing patches (burn, fire, noise)
- [cannabisleaf](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/cannabisleaf.glsl): A cannabis-leaf shape grows from the center to reveal the incoming image (shape, wipe)
- [chessboard](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/chessboard.glsl): A chessboard pattern of squares reveals the incoming image (grid, squares, pattern)
- [circle](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/circle.glsl): The outgoing image closes into a circle over a background color, then the incoming one opens from it (circle, iris, shape)
- [circleopen](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/circleopen.glsl): A soft-edged circle opens from the center to reveal the incoming image (circle, iris, wipe)
- [colorphase](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/colorphase.glsl): A crossfade in which each color channel changes at a different time (fade, color)
- [coord-from-in](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/coord-from-in.glsl): A crossfade in which the colors of one image displace the other (displace, distort, blend)
- [crosshatch](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/crosshatch.glsl): The incoming image appears through a crosshatch of lines spreading from the center (pattern, lines, noise)
- [crosswarp](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/crosswarp.glsl): The outgoing image zooms in while the incoming one zooms out into place, sweeping from right to left (warp, zoom, horizontal)
- [cube](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/cube.glsl): The two images are faces of a rotating 3D cube, with a floor reflection (3d, cube, rotate, reflection)
- [directional-easing](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/directional-easing.glsl): Like Directional, with an eased movement (slide, push, directional)
- [directionalwarp](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/directionalwarp.glsl): A diagonal wipe with a warped, smeared edge (wipe, warp, directional)
- [directionalwipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/directionalwipe.glsl): A soft-edged diagonal wipe (wipe, directional)
- [displacement](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/displacement.glsl): A crossfade in which a displacement map (an extra grayscale texture) warps both images (displace, distort, blend)
- [dissolve](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/dissolve.glsl): The incoming image spreads over the outgoing one with a hot, glowing edge (dissolve, burn, glow)
- [doorway](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/doorway.glsl): The outgoing image opens like double doors as the incoming one comes forward, with a floor reflection (doors, 3d, reflection)
- [fade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/fade.glsl): A linear crossfade between the two images (fade, blend)
- [fadecolor](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/fadecolor.glsl): A fade through a solid color, black by default (fade, color)
- [fadegrayscale](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/fadegrayscale.glsl): A crossfade through grayscale (fade, grayscale, color)
- [flyeye](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/flyeye.glsl): The image breaks into a fly's-eye grid of lenses with color separation (lens, distort, chromatic)
- [fragment](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/fragment.glsl): The outgoing image shatters into fragments that fly away (shatter, fragments)
- [heart](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/heart.glsl): A heart shape grows from the center to reveal the incoming image (shape, wipe, heart)
- [hexagonalize](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/hexagonalize.glsl): Both images turn into hexagons, crossfade, then sharpen again (pixelate, hexagon, blend)
- [kaleidoscope](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/kaleidoscope.glsl): A crossfade through a spinning kaleidoscope (kaleidoscope, distort, blend)
- [luma](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/luma.glsl): A wipe that follows the brightness of a grayscale mask (the luma texture) (wipe, luma, mask)
- [luminance_melt](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/luminance_melt.glsl): The outgoing image melts away in noisy vertical streaks, depending on its brightness (melt, noise, luma)
- [morph](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/morph.glsl): A crossfade in which each image is displaced by the other's colors, like a morph (morph, distort, blend)
- [mosaic_transition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/mosaic_transition.glsl): Both images break into mosaic blocks that blend, then sharpen into the incoming image (mosaic, pixelate, blend)
- [multiply_blend](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/multiply_blend.glsl): A crossfade through the multiplied blend of both images (blend, fade)
- [old_tv_lost_signal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/old_tv_lost_signal.glsl): A crossfade with drifting tracking lines and tearing, like a TV losing its signal (retro, glitch, scanlines)
- [parametric_glitch](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/parametric_glitch.glsl): A crossfade with glitchy horizontal bands and color shifts (glitch, blend)
- [perlin](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/perlin.glsl): The incoming image appears through blobs of Perlin noise (noise, dissolve)
- [pinwheel](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/pinwheel.glsl): A spinning pinwheel reveals the incoming image (pinwheel, radial, rotate)
- [pixelize](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/pixelize.glsl): Both images pixelate, crossfade, then sharpen again (pixelate, blend)
- [polar_function](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/polar_function.glsl): A flower shape with several petals grows to reveal the incoming image (shape, wipe, polar)
- [powerKaleido](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/powerKaleido.glsl): The image folds into an animated kaleidoscope before revealing the incoming one (kaleidoscope, distort)
- [randomNoisex](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/randomNoisex.glsl): The incoming image appears pixel by pixel in random noise (dissolve, noise)
- [randomsquares](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/randomsquares.glsl): The incoming image appears in random squares (squares, grid, dissolve)
- [ripple](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/ripple.glsl): Ripples spread from the center while crossfading (ripple, wave, blend)
- [rotateTransition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/rotateTransition.glsl): The images spin around the center while crossfading (rotate, spin, blend)
- [rotate_scale_fade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/rotate_scale_fade.glsl): The outgoing image spins and zooms while fading to the incoming one, over a background color (rotate, zoom, fade)
- [scale-in](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/scale-in.glsl): The incoming image scales in from the center while fading in (zoom, fade)
- [splitSlideInHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/splitSlideInHorizontal.glsl): The incoming image slides in as two halves moving horizontally in opposite directions (slide, split, horizontal)
- [splitSlideInOutHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/splitSlideInOutHorizontal.glsl): The halves of both images slide horizontally in opposite directions, out and in at once (slide, split, horizontal)
- [splitSlideInOutVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/splitSlideInOutVertical.glsl): The halves of both images slide vertically in opposite directions, out and in at once (slide, split, vertical)
- [splitSlideInVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/splitSlideInVertical.glsl): The incoming image slides in as two halves moving vertically in opposite directions (slide, split, vertical)
- [splitSlideOutHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/splitSlideOutHorizontal.glsl): The outgoing image slides out as two halves moving horizontally in opposite directions (slide, split, horizontal)
- [splitSlideOutVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/splitSlideOutVertical.glsl): The outgoing image slides out as two halves moving vertically in opposite directions (slide, split, vertical)
- [squareswire](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/squareswire.glsl): Squares grow along a diagonal sweep to reveal the incoming image (squares, grid, wipe, directional)
- [squeeze](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/squeeze.glsl): The outgoing image is squeezed into a line with color separation, revealing the incoming one (squeeze, chromatic, vertical)
- [static_wipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/static_wipe.glsl): A wipe from top to bottom with a band of TV static at its edge (wipe, static, noise, vertical)
- [swap](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/swap.glsl): The two images swap places in 3D, with a floor reflection (3d, swap, reflection)
- [tangentMotionBlur](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/tangentMotionBlur.glsl): The outgoing image is flung away along a curve with motion blur (motion-blur, rotate, slide)
- [undulatingBurnOut](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/undulatingBurnOut.glsl): A circle with a wavy edge burns out from the center to reveal the incoming image (circle, burn, wipe)
- [wind](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/wind.glsl): A ragged left-to-right wipe, as if the image was blown away by the wind (wipe, horizontal, noise)
- [windowblinds](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/windowblinds.glsl): A crossfade through horizontal window blinds (blinds, stripes, blend)
- [windowslice](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/windowslice.glsl): The incoming image appears through vertical slices that widen (slices, stripes, wipe)
- [wipeDown](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/wipeDown.glsl): A hard-edged wipe from top to bottom (wipe, vertical)
- [wipeLeft](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/wipeLeft.glsl): A hard-edged wipe from right to left (wipe, horizontal)
- [wipeRight](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/wipeRight.glsl): A hard-edged wipe from left to right (wipe, horizontal)
- [wipeUp](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/wipeUp.glsl): A hard-edged wipe from bottom to top (wipe, vertical)
- [x_axis_translation](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/x_axis_translation.glsl): The outgoing image slides to the right, uncovering a crossfade to the incoming one (slide, horizontal, blend)
- [zoomInOut](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.1/transitions/zoomInOut.glsl): Zooms into the outgoing image until it blurs into a flat color, then out to the incoming one (zoom, blur)

## Optional

- [Gallery](https://gl-transitions.com/gallery): animated previews of every transition
- [Editor](https://gl-transitions.com/editor): write and test a transition in the browser
- [Contributing](https://github.com/gl-transitions/gl-transitions/blob/master/CONTRIBUTING.md): how to add a transition