gl-transitions
Version:
The open collection of GL Transitions
1,708 lines • 60.5 kB
Plain Text
# 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.75.0 (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` SkSL versions (`sksl/<name>.sksl`) are standalone Skia runtime effects: children `_from`, `_to` (then one per extra texture), uniforms `float2 _resolution` (output size in pixels), `progress`, `ratio` and each parameter by name (`bool` parameters are `int` 0 or 1), entry point `half4 main(float2 coord)` with a top-left origin. Draw both images at the output size. Install: `npm install gl-transitions` (`import transitions from "gl-transitions"`), or fetch the files below. Latest version: https://cdn.jsdelivr.net/npm/gl-transitions@1/ ## AdvancedMosaic Both images break into large blocks that blend, then sharpen into the incoming image - Tags: pixelate, mosaic, blend - Parameters: - `pixelSize` (float = 50) - Author: Sergey Kosarevsky - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/AdvancedMosaic.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/AdvancedMosaic.sksl - Preview: https://gl-transitions.com/editor/AdvancedMosaic ## BlockDissolve The incoming image appears in small random blocks - Tags: dissolve, blocks, noise - Parameters: - `blocksize` (float = 0.02) - Author: nwoeanhinnogaehr - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BlockDissolve.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BlockDissolve.sksl - Preview: https://gl-transitions.com/editor/BlockDissolve ## BookFlip The outgoing image turns like a book page from right to left, revealing the incoming one - Tags: page, flip, 3d - Parameters: none - Author: hong - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BookFlip.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BookFlip.sksl - Preview: https://gl-transitions.com/editor/BookFlip ## Bounce The outgoing image drops out of the frame with a few bounces, revealing the incoming one - Tags: bounce, slide, vertical, shadow - Parameters: - `shadow_colour` (vec4 = vec4(0, 0, 0, 0.6)) [color]: Color of the shadow cast on the incoming image - `shadow_height` (float = 0.075) [range 0.01 to 0.5]: Height of the shadow, relative to the image height - `bounces` (float = 3) [range 1 to 10 step 1]: Number of bounces before settling - Author: Adrian Purser - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Bounce.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Bounce.sksl - Preview: https://gl-transitions.com/editor/Bounce ## BowTieHorizontal Two triangles grow from the left and right edges into a bow tie that reveals the incoming image - Tags: wipe, shape, horizontal - Parameters: none - Author: huynx - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BowTieHorizontal.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BowTieHorizontal.sksl - Preview: https://gl-transitions.com/editor/BowTieHorizontal ## BowTieVertical Two triangles grow from the top and bottom edges into a bow tie that reveals the incoming image - Tags: wipe, shape, vertical - Parameters: none - Author: huynx - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BowTieVertical.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BowTieVertical.sksl - Preview: https://gl-transitions.com/editor/BowTieVertical ## BowTieWithParameter A bow-tie wipe with an adjustable shape that can run in reverse - Tags: wipe, shape - Parameters: - `adjust` (float = 0.5) - `reverse` (bool = false): Run the wipe in reverse - Author: KMojek - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BowTieWithParameter.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BowTieWithParameter.sksl - Preview: https://gl-transitions.com/editor/BowTieWithParameter ## Box The outgoing image shrinks into a box, toward the center or a corner, revealing the incoming one - Tags: box, zoom, shape - Parameters: - `rectIn` (int = 1) - `location` (int = 0) [range 0 to 4 step 1]: Where the box goes: 0 center, 1 left top, 2 left bottom, 3 right top, 4 right bottom - Author: lql - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Box.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Box.sksl - Preview: https://gl-transitions.com/editor/Box ## ButterflyWaveScrawler Wavy, color-separated ripples scramble the outgoing image into the incoming one - Tags: wave, distort, chromatic - Parameters: - `amplitude` (float = 1) - `waves` (float = 30) - `colorSeparation` (float = 0.3) - Author: mandubian - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ButterflyWaveScrawler.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ButterflyWaveScrawler.sksl - Preview: https://gl-transitions.com/editor/ButterflyWaveScrawler ## CircleCrop The outgoing image closes into a circle over a background color, then the incoming one opens from it - Tags: circle, iris, shape - Parameters: - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Background color - Author: fkuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/CircleCrop.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/CircleCrop.sksl - Preview: https://gl-transitions.com/editor/CircleCrop ## ColourDistance Pixels switch to the incoming image in order of how close their colors are - Tags: blend, color - Parameters: - `power` (float = 5) - Author: P-Seebauer - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ColourDistance.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ColourDistance.sksl - Preview: https://gl-transitions.com/editor/ColourDistance ## CrazyParametricFun The outgoing image is pulled along a parametric curve into a psychedelic swirl - Tags: distort, psychedelic - Parameters: - `a` (float = 4) - `b` (float = 1) - `amplitude` (float = 120) - `smoothness` (float = 0.1) - Author: mandubian - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/CrazyParametricFun.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/CrazyParametricFun.sksl - Preview: https://gl-transitions.com/editor/CrazyParametricFun ## CrossZoom A crossfade through a strong zoom blur - Tags: zoom, blur, blend - Parameters: - `strength` (float = 0.4) [range 0 to 1]: Blur strength - Author: rectalogic - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/CrossZoom.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/CrossZoom.sksl - Preview: https://gl-transitions.com/editor/CrossZoom ## DefocusBlur A crossfade through an out-of-focus blur - Tags: blur, blend - Parameters: - `blurSize` (float = 0.02): Amount of blur - Author: Sergey Kosarevsky - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DefocusBlur.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DefocusBlur.sksl - Preview: https://gl-transitions.com/editor/DefocusBlur ## Directional The incoming image pushes the outgoing one out in a given direction - Tags: slide, push, directional - Parameters: - `direction` (vec2 = vec2(0, 1)): Direction of the movement - Author: Gaëtan Renaudeau - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Directional.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Directional.sksl - Preview: https://gl-transitions.com/editor/Directional ## DirectionalScaled Like Directional, with both images scaled down while they slide - Tags: slide, push, zoom, directional - Parameters: - `direction` (vec2 = vec2(0, 1)): Direction of the movement - `scale` (float = 0.7) - Author: Thibaut Foussard - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DirectionalScaled.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DirectionalScaled.sksl - Preview: https://gl-transitions.com/editor/DirectionalScaled ## DoomScreenTransition The outgoing image melts down in uneven columns, like the Doom screen wipe - Tags: melt, columns, retro - Parameters: - `bars` (int = 30) - `amplitude` (float = 2) - `noise` (float = 0.1) - `frequency` (float = 0.5) - `dripScale` (float = 0.5) - Author: Zeh Fernando - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DoomScreenTransition.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DoomScreenTransition.sksl - Preview: https://gl-transitions.com/editor/DoomScreenTransition ## Dreamy A crossfade with a gentle wavy distortion - Tags: wave, blend - Parameters: none - Author: mikolalysenko - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Dreamy.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Dreamy.sksl - Preview: https://gl-transitions.com/editor/Dreamy ## DreamyZoom Zooms and rotates into a bright flash, then out to the incoming image - Tags: zoom, rotate, flash - Parameters: - `rotation` (float = 6) - `scale` (float = 1.2) - Author: Zeh Fernando - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DreamyZoom.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DreamyZoom.sksl - Preview: https://gl-transitions.com/editor/DreamyZoom ## Drop_Zone_Flicker A flickering glitch with RGB offset, ghosting and scanlines that flashes back to the outgoing image - Tags: glitch, flicker, chromatic, scanlines - Parameters: - `frameRate` (float = 24) - `rgbOffset` (float = 0.014) - `blockAmount` (float = 0.72) - `ghostAmount` (float = 0.62) - `redCyan` (float = 0.58) - `scanline` (float = 0.075) - Author: bread - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Drop_Zone_Flicker.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Drop_Zone_Flicker.sksl - Preview: https://gl-transitions.com/editor/Drop_Zone_Flicker ## EdgeTransition Both images fade through black with their edges glowing - Tags: edges, fade - Parameters: - `edge_thickness` (float = 0.001) - `edge_brightness` (float = 8) - Author: Woohyun Kim - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/EdgeTransition.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/EdgeTransition.sksl - Preview: https://gl-transitions.com/editor/EdgeTransition ## FilmBurn Glowing film-burn light leaks wash over the image and reveal the incoming one - Tags: burn, film, light-leak - Parameters: - `Seed` (float = 2.31): Random seed - Author: Anastasia Dunbar - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/FilmBurn.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/FilmBurn.sksl - Preview: https://gl-transitions.com/editor/FilmBurn ## Fold The incoming image unfolds from the left while the outgoing one folds away to the right - Tags: fold, slide, horizontal - Parameters: none - Author: nwoeanhinnogaehr - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Fold.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Fold.sksl - Preview: https://gl-transitions.com/editor/Fold ## GlitchDisplace Blocks of the image are displaced in a glitch that flashes into the incoming image - Tags: glitch, displace - Parameters: none - Author: Matt DesLauriers - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/GlitchDisplace.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/GlitchDisplace.sksl - Preview: https://gl-transitions.com/editor/GlitchDisplace ## GlitchMemories A crossfade with glitchy, color-shifted blocks - Tags: glitch, chromatic, blend - Parameters: none - Author: Gunnar Roth - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/GlitchMemories.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/GlitchMemories.sksl - Preview: https://gl-transitions.com/editor/GlitchMemories ## GridFlip The image splits into a grid of tiles that flip one by one to the incoming image - Tags: grid, tiles, flip - Parameters: - `size` (ivec2 = ivec2(4, 4)): Number of tiles (columns, rows) - `pause` (float = 0.1) - `dividerWidth` (float = 0.05) - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Color behind the tiles - `randomness` (float = 0.1) - Author: TimDonselaar - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/GridFlip.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/GridFlip.sksl - Preview: https://gl-transitions.com/editor/GridFlip ## HSVfade A crossfade through the HSV color space that cycles through hues - Tags: fade, color, hue - Parameters: none - Author: nwoeanhinnogaehr - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/HSVfade.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/HSVfade.sksl - Preview: https://gl-transitions.com/editor/HSVfade ## HorizontalClose The incoming image closes in from the top and bottom edges toward the middle - Tags: wipe, split - Parameters: none - Author: martiniti - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/HorizontalClose.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/HorizontalClose.sksl - Preview: https://gl-transitions.com/editor/HorizontalClose ## HorizontalOpen The incoming image opens from a line in the middle toward the top and bottom edges - Tags: wipe, split - Parameters: none - Author: martiniti - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/HorizontalOpen.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/HorizontalOpen.sksl - Preview: https://gl-transitions.com/editor/HorizontalOpen ## InvertedPageCurl The outgoing image curls away like a page, revealing the incoming one - Tags: page, curl, 3d - Parameters: none - Author: Hewlett-Packard - License: BSD 3 Clause - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/InvertedPageCurl.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/InvertedPageCurl.sksl - Preview: https://gl-transitions.com/editor/InvertedPageCurl ## LeftRight The outgoing image shrinks away to the left while the incoming one slides in from the right - Tags: slide, zoom, horizontal - Parameters: none - Author: zhmy - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/LeftRight.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/LeftRight.sksl - Preview: https://gl-transitions.com/editor/LeftRight ## LinearBlur A crossfade through a blur - Tags: blur, blend - Parameters: - `intensity` (float = 0.1): Amount of blur - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/LinearBlur.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/LinearBlur.sksl - Preview: https://gl-transitions.com/editor/LinearBlur ## Mosaic The view pans across a mosaic of rotated tiles from both images and settles on the incoming one - Tags: mosaic, tiles, zoom - Parameters: - `endx` (int = 2) - `endy` (int = -1) - Author: Xaychru - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Mosaic.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Mosaic.sksl - Preview: https://gl-transitions.com/editor/Mosaic ## Overexposure A crossfade through a washed-out, overexposed white - Tags: flash, light, fade - Parameters: - `strength` (float = 0.6): Amount of overexposure - Author: Ben Zhang - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Overexposure.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Overexposure.sksl - Preview: https://gl-transitions.com/editor/Overexposure ## PolkaDotsCurtain The incoming image appears through growing polka dots - Tags: dots, pattern - Parameters: - `dots` (float = 20): Number of dots across the image - `center` (vec2 = vec2(0, 0)) - Author: bobylito - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/PolkaDotsCurtain.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/PolkaDotsCurtain.sksl - Preview: https://gl-transitions.com/editor/PolkaDotsCurtain ## PuzzleRight The image splits into a grid of tiles that flip one by one to the incoming image - Tags: grid, tiles, flip - Parameters: - `size` (ivec2 = ivec2(4, 4)) - `pause` (float = 0.1) - `dividerWidth` (float = 0.005) - Author: JustKirillS - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/PuzzleRight.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/PuzzleRight.sksl - Preview: https://gl-transitions.com/editor/PuzzleRight ## Radial A radial wipe that sweeps around the center like a clock hand - Tags: wipe, radial, clock - Parameters: - `smoothness` (float = 1) - Author: Xaychru - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Radial.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Radial.sksl - Preview: https://gl-transitions.com/editor/Radial ## Rectangle A rectangle grows from the center to cover the outgoing image, then shrinks to reveal the incoming one - Tags: box, shape, iris - Parameters: - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Color of the rectangle - Author: martiniti - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Rectangle.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Rectangle.sksl - Preview: https://gl-transitions.com/editor/Rectangle ## RectangleCrop The outgoing image shrinks into a small rectangle over a background color, then the incoming one grows from it - Tags: box, iris, zoom - Parameters: - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Background color - Author: martiniti - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/RectangleCrop.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/RectangleCrop.sksl - Preview: https://gl-transitions.com/editor/RectangleCrop ## Revolve_Left The outgoing image swirls and zooms with motion blur into the incoming one - Tags: swirl, zoom, rotate, blur - Parameters: - `center` (vec2 = vec2(0.46, 0.52)): Center of the swirl - `direction` (float = -1) - `maxRotation` (float = 1.95) - `peakZoom` (float = 2.22) - `swirl` (float = 2.85) - `barrel` (float = 0.38) - `motionBlur` (float = 1) - `switchStart` (float = 0.3) - `switchEnd` (float = 0.5) - `shadow` (float = 0.16) - Author: bread - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Revolve_Left.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Revolve_Left.sksl - Preview: https://gl-transitions.com/editor/Revolve_Left ## Rolls The outgoing image rolls away around a corner, revealing the incoming one - Tags: rotate, roll - Parameters: - `type` (int = 0) [range 0 to 3 step 1]: Corner to roll around - `RotDown` (bool = false): Roll the outgoing image down instead of up - Author: Mark Craig - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Rolls.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Rolls.sksl - Preview: https://gl-transitions.com/editor/Rolls ## RotateScaleVanish The outgoing image spins and shrinks away over the incoming one - Tags: rotate, zoom, spin - Parameters: - `FadeInSecond` (bool = true): Fade in the incoming image - `ReverseEffect` (bool = false): Run the effect in reverse - `ReverseRotation` (bool = false): Rotate the other way - Author: Mark Craig - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/RotateScaleVanish.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/RotateScaleVanish.sksl - Preview: https://gl-transitions.com/editor/RotateScaleVanish ## SimpleFlip The outgoing image flips around the vertical axis into the incoming one - Tags: flip, horizontal - Parameters: none - Author: nwoeanhinnogaehr - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/SimpleFlip.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/SimpleFlip.sksl - Preview: https://gl-transitions.com/editor/SimpleFlip ## SimpleZoom Zooms into the outgoing image, then fades to the incoming one - Tags: zoom, fade - Parameters: - `zoom_quickness` (float = 0.8) [range 0.2 to 1]: Part of the transition spent zooming - Author: 0gust1 - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/SimpleZoom.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/SimpleZoom.sksl - Preview: https://gl-transitions.com/editor/SimpleZoom ## SimpleZoomOut The incoming image zooms out into place while fading in - Tags: zoom, fade - Parameters: - `zoom_quickness` (float = 0.8) [range 0.2 to 1]: Part of the transition spent zooming - `fade` (bool = true): Fade instead of cutting to the incoming image - Author: Tianshuo - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/SimpleZoomOut.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/SimpleZoomOut.sksl - Preview: https://gl-transitions.com/editor/SimpleZoomOut ## Slides The outgoing image slides out, or the incoming one slides in, toward an edge, a corner or the center - Tags: slide, directional - Parameters: - `type` (int = 0) - `In` (bool = false): Slide the incoming image in instead of the outgoing one out - Author: Mark Craig - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Slides.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Slides.sksl - Preview: https://gl-transitions.com/editor/Slides ## StarWipe A growing star reveals the incoming image - Tags: wipe, shape, star - Parameters: - `border_thickness` (float = 0.01): Thickness of the star's border - `star_rotation` (float = 0.75) - `border_color` (vec4 = vec4(1, 1, 1, 1)) [color]: Color of the star's border - `star_center` (vec2 = vec2(0.5, 0.5)): Center of the star - Author: Ben Lucas - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StarWipe.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StarWipe.sksl - Preview: https://gl-transitions.com/editor/StarWipe ## StaticFade Cuts to the incoming image halfway, hidden behind a burst of TV static - Tags: static, noise, retro - Parameters: - `n_noise_pixels` (float = 200) - `static_luminosity` (float = 0.8) - Author: Ben Lucas - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StaticFade.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StaticFade.sksl - Preview: https://gl-transitions.com/editor/StaticFade ## StereoViewer Both images shrink into rounded cards that swap, like a stereo viewer toy - Tags: cards, zoom, retro - Parameters: - `zoom` (float = 0.88) [range 0.5 to 1]: How much the images zoom out - `corner_radius` (float = 0.22) - Author: Ted Schundler - License: BSD 2 Clause - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StereoViewer.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StereoViewer.sksl - Preview: https://gl-transitions.com/editor/StereoViewer ## StripDatamoshGlitch A datamosh glitch: torn strips, chroma shifts and scan noise drag the outgoing image into the incoming one - Tags: glitch, datamosh, chromatic - Parameters: - `strength` (float = 1) - `horizontalBars` (float = 42) - `verticalSlits` (float = 18) - `tear` (float = 0.18) - `chroma` (float = 0.032) - `residue` (float = 0.62) - `noiseAmount` (float = 0.16) - `scanAmount` (float = 0.13) - `flashAmount` (float = 0.2) - Author: bread - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StripDatamoshGlitch.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StripDatamoshGlitch.sksl - Preview: https://gl-transitions.com/editor/StripDatamoshGlitch ## Swirl Both images swirl around the center while crossfading - Tags: swirl, rotate, blend - Parameters: none - Author: Sergey Kosarevsky - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Swirl.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Swirl.sksl - Preview: https://gl-transitions.com/editor/Swirl ## TVStatic Cuts to full-screen TV static, then to the incoming image - Tags: static, noise, retro - Parameters: - `offset` (float = 0.05): Part of the transition, at each end, that shows the images instead of static - Author: Brandon Anzaldi - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/TVStatic.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/TVStatic.sksl - Preview: https://gl-transitions.com/editor/TVStatic ## TilesWave The incoming image is revealed tile by tile in a diagonal wave - Tags: tiles, wave, wipe - Parameters: - `tileCount` (ivec2 = ivec2(8, 8)): Number of tiles (columns, rows) - `flipX` (bool = true) - `flipY` (bool = false) - Author: numb3r23 - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/TilesWave.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/TilesWave.sksl - Preview: https://gl-transitions.com/editor/TilesWave ## TopBottom The outgoing image shrinks away upward while the incoming one slides in from the bottom - Tags: slide, zoom, vertical - Parameters: none - Author: zhmy - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/TopBottom.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/TopBottom.sksl - Preview: https://gl-transitions.com/editor/TopBottom ## VerticalClose The incoming image closes in from the left and right edges toward the middle - Tags: wipe, split - Parameters: none - Author: martiniti - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/VerticalClose.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/VerticalClose.sksl - Preview: https://gl-transitions.com/editor/VerticalClose ## VerticalOpen The incoming image opens from a line in the middle toward the left and right edges - Tags: wipe, split - Parameters: none - Author: martiniti - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/VerticalOpen.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/VerticalOpen.sksl - Preview: https://gl-transitions.com/editor/VerticalOpen ## WaterDrop Ripples spread from the center like a drop falling into water, crossfading to the incoming image - Tags: ripple, water, blend - Parameters: - `amplitude` (float = 30): Frequency of the ripples - `speed` (float = 30): Speed of the ripples - Author: Paweł Płóciennik - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/WaterDrop.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/WaterDrop.sksl - Preview: https://gl-transitions.com/editor/WaterDrop ## ZoomInCircles Concentric rings of the outgoing image zoom at different speeds before revealing the incoming one - Tags: zoom, circle - Parameters: none - Author: dycm8009 - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ZoomInCircles.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ZoomInCircles.sksl - Preview: https://gl-transitions.com/editor/ZoomInCircles ## ZoomLeftWipe Zooms into the outgoing image, then the incoming one wipes in from right to left - Tags: zoom, wipe, horizontal - Parameters: - `zoom_quickness` (float = 0.8): Part of the first half spent zooming (capped at 0.5) - Author: Handk - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ZoomLeftWipe.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ZoomLeftWipe.sksl - Preview: https://gl-transitions.com/editor/ZoomLeftWipe ## ZoomRigthWipe Zooms into the outgoing image, then the incoming one wipes in from left to right - Tags: zoom, wipe, horizontal - Parameters: - `zoom_quickness` (float = 0.8): Part of the first half spent zooming (capped at 0.5) - Author: Handk - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ZoomRigthWipe.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ZoomRigthWipe.sksl - Preview: https://gl-transitions.com/editor/ZoomRigthWipe ## angular A wipe that sweeps around the center from a starting angle - Tags: wipe, radial, clock - Parameters: - `startingAngle` (float = 90) [range 0 to 360]: Angle where the wipe starts, in degrees - Author: Fernando Kuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/angular.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/angular.sksl - Preview: https://gl-transitions.com/editor/angular ## burn A crossfade that brightens toward a color in the middle - Tags: fade, color, flash - Parameters: - `color` (vec3 = vec3(0.9, 0.4, 0.2)) [color]: Color the images brighten toward - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/burn.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/burn.sksl - Preview: https://gl-transitions.com/editor/burn ## burn0 The outgoing image burns away in noisy, glowing patches - Tags: burn, fire, noise - Parameters: - `burnColor` (vec3 = vec3(1, 0.5, 0)) [color]: Color of the burning edges - Author: liubailin2020@gmail.com - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/burn0.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/burn0.sksl - Preview: https://gl-transitions.com/editor/burn0 ## cannabisleaf A cannabis-leaf shape grows from the center to reveal the incoming image - Tags: shape, wipe - Parameters: none - Author: @Flexi23 - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/cannabisleaf.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/cannabisleaf.sksl - Preview: https://gl-transitions.com/editor/cannabisleaf ## chessboard A chessboard pattern of squares reveals the incoming image - Tags: grid, squares, pattern - Parameters: - `grid_num` (float = 10): Number of squares per row - Author: lql - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/chessboard.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/chessboard.sksl - Preview: https://gl-transitions.com/editor/chessboard ## circle The outgoing image closes into a circle over a background color, then the incoming one opens from it - Tags: circle, iris, shape - Parameters: - `center` (vec2 = vec2(0.5, 0.5)): Center of the circle - `backColor` (vec3 = vec3(0.1, 0.1, 0.1)) [color]: Background color - Author: Fernando Kuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/circle.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/circle.sksl - Preview: https://gl-transitions.com/editor/circle ## circleopen A soft-edged circle opens from the center to reveal the incoming image - Tags: circle, iris, wipe - Parameters: - `smoothness` (float = 0.3): Softness of the circle's edge - `opening` (bool = true): Open the circle; false closes it instead - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/circleopen.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/circleopen.sksl - Preview: https://gl-transitions.com/editor/circleopen ## colorphase A crossfade in which each color channel changes at a different time - Tags: fade, color - Parameters: - `fromStep` (vec4 = vec4(0, 0.2, 0.4, 0)) [range 0 to 1]: When each channel (r, g, b, a) starts changing - `toStep` (vec4 = vec4(0.6, 0.8, 1, 1)) [range 0 to 1]: When each channel (r, g, b, a) finishes changing - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/colorphase.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/colorphase.sksl - Preview: https://gl-transitions.com/editor/colorphase ## coord-from-in A crossfade in which the colors of one image displace the other - Tags: displace, distort, blend - Parameters: none - Author: haiyoucuv - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/coord-from-in.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/coord-from-in.sksl - Preview: https://gl-transitions.com/editor/coord-from-in ## crosshatch The incoming image appears through a crosshatch of lines spreading from the center - Tags: pattern, lines, noise - Parameters: - `center` (vec2 = vec2(0.5, 0.5)): Point the lines spread from - `threshold` (float = 3) - `fadeEdge` (float = 0.1) - Author: pthrasher - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/crosshatch.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/crosshatch.sksl - Preview: https://gl-transitions.com/editor/crosshatch ## crosswarp The outgoing image zooms in while the incoming one zooms out into place, sweeping from right to left - Tags: warp, zoom, horizontal - Parameters: none - Author: Eke Péter <peterekepeter@gmail.com> - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/crosswarp.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/crosswarp.sksl - Preview: https://gl-transitions.com/editor/crosswarp ## cube The two images are faces of a rotating 3D cube, with a floor reflection - Tags: 3d, cube, rotate, reflection - Parameters: - `persp` (float = 0.7) [range 0 to 1]: Amount of perspective - `unzoom` (float = 0.3) - `reflection` (float = 0.4) [range 0 to 1]: Strength of the reflection - `floating` (float = 3) - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/cube.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/cube.sksl - Preview: https://gl-transitions.com/editor/cube ## directional-easing Like Directional, with an eased movement - Tags: slide, push, directional - Parameters: - `direction` (vec2 = vec2(0, 1)): Direction of the movement - Author: Max Plotnikov - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/directional-easing.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/directional-easing.sksl - Preview: https://gl-transitions.com/editor/directional-easing ## directionalwarp A diagonal wipe with a warped, smeared edge - Tags: wipe, warp, directional - Parameters: - `smoothness` (float = 0.1): Softness of the edge - `direction` (vec2 = vec2(-1, 1)): Direction of the wipe - Author: pschroen - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/directionalwarp.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/directionalwarp.sksl - Preview: https://gl-transitions.com/editor/directionalwarp ## directionalwipe A soft-edged diagonal wipe - Tags: wipe, directional - Parameters: - `direction` (vec2 = vec2(1, -1)): Direction of the wipe - `smoothness` (float = 0.5): Softness of the edge - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/directionalwipe.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/directionalwipe.sksl - Preview: https://gl-transitions.com/editor/directionalwipe ## displacement A crossfade in which a displacement map (an extra grayscale texture) warps both images - Tags: displace, distort, blend - Parameters: - `strength` (float = 0.5): Strength of the displacement - Extra textures: `displacementMap` (sampler2D) - Author: Travis Fischer - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/displacement.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/displacement.sksl - Preview: https://gl-transitions.com/editor/displacement ## dissolve The incoming image spreads over the outgoing one with a hot, glowing edge - Tags: dissolve, burn, glow - Parameters: - `uLineWidth` (float = 0.1) - `uSpreadClr` (vec3 = vec3(1, 0, 0)) [color]: Color of the spreading edge - `uHotClr` (vec3 = vec3(0.9, 0.9, 0.2)) [color]: Color of the hottest part of the edge - `uPow` (float = 5) - `uIntensity` (float = 1) - Author: hjm1fb - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/dissolve.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/dissolve.sksl - Preview: https://gl-transitions.com/editor/dissolve ## doorway The outgoing image opens like double doors as the incoming one comes forward, with a floor reflection - Tags: doors, 3d, reflection - Parameters: - `reflection` (float = 0.4): Strength of the reflection - `perspective` (float = 0.4): Amount of perspective - `depth` (float = 3) - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/doorway.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/doorway.sksl - Preview: https://gl-transitions.com/editor/doorway ## fade A linear crossfade between the two images - Tags: fade, blend - Parameters: none - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fade.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fade.sksl - Preview: https://gl-transitions.com/editor/fade ## fadecolor A fade through a solid color, black by default - Tags: fade, color - Parameters: - `color` (vec3 = vec3(0, 0, 0)) [color]: Color to fade through - `colorPhase` (float = 0.4) [range 0 to 1]: How long the color shows in the middle - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fadecolor.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fadecolor.sksl - Preview: https://gl-transitions.com/editor/fadecolor ## fadegrayscale A crossfade through grayscale - Tags: fade, grayscale, color - Parameters: - `intensity` (float = 0.3) [range 0 to 1]: How long the grayscale phase lasts - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fadegrayscale.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fadegrayscale.sksl - Preview: https://gl-transitions.com/editor/fadegrayscale ## flyeye The image breaks into a fly's-eye grid of lenses with color separation - Tags: lens, distort, chromatic - Parameters: - `size` (float = 0.04) - `zoom` (float = 50) - `colorSeparation` (float = 0.3) - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/flyeye.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/flyeye.sksl - Preview: https://gl-transitions.com/editor/flyeye ## fragment The outgoing image shatters into fragments that fly away - Tags: shatter, fragments - Parameters: none - Author: lbl - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fragment.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fragment.sksl - Preview: https://gl-transitions.com/editor/fragment ## heart A heart shape grows from the center to reveal the incoming image - Tags: shape, wipe, heart - Parameters: none - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/heart.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/heart.sksl - Preview: https://gl-transitions.com/editor/heart ## hexagonalize Both images turn into hexagons, crossfade, then sharpen again - Tags: pixelate, hexagon, blend - Parameters: - `steps` (int = 50) - `horizontalHexagons` (float = 20): Number of hexagons across - Author: Fernando Kuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/hexagonalize.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/hexagonalize.sksl - Preview: https://gl-transitions.com/editor/hexagonalize ## kaleidoscope A crossfade through a spinning kaleidoscope - Tags: kaleidoscope, distort, blend - Parameters: - `speed` (float = 1) - `angle` (float = 1) - `power` (float = 1.5) - Author: nwoeanhinnogaehr - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/kaleidoscope.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/kaleidoscope.sksl - Preview: https://gl-transitions.com/editor/kaleidoscope ## luma A wipe that follows the brightness of a grayscale mask (the luma texture) - Tags: wipe, luma, mask - Parameters: none - Extra textures: `luma` (sampler2D) - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/luma.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/luma.sksl - Preview: https://gl-transitions.com/editor/luma ## luminance_melt The outgoing image melts away in noisy vertical streaks, depending on its brightness - Tags: melt, noise, luma - Parameters: - `direction` (bool = true): Direction of the melt (false: up, true: down) - `l_threshold` (float = 0.8) [range 0 to 1]: Luminance threshold - `above` (bool = false): Melt the parts above the threshold instead of below - Author: 0gust1 - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/luminance_melt.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/luminance_melt.sksl - Preview: https://gl-transitions.com/editor/luminance_melt ## morph A crossfade in which each image is displaced by the other's colors, like a morph - Tags: morph, distort, blend - Parameters: - `strength` (float = 0.1): Strength of the displacement - Author: paniq - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/morph.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/morph.sksl - Preview: https://gl-transitions.com/editor/morph ## mosaic_transition Both images break into mosaic blocks that blend, then sharpen into the incoming image - Tags: mosaic, pixelate, blend - Parameters: - `mosaicNum` (float = 10): Number of mosaic blocks - Author: YueDev - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/mosaic_transition.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/mosaic_transition.sksl - Preview: https://gl-transitions.com/editor/mosaic_transition ## multiply_blend A crossfade through the multiplied blend of both images - Tags: blend, fade - Parameters: none - Author: Fernando Kuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/multiply_blend.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/multiply_blend.sksl - Preview: https://gl-transitions.com/editor/multiply_blend ## old_tv_lost_signal A crossfade with drifting tracking lines and tearing, like a TV losing its signal - Tags: retro, glitch, scanlines - Parameters: none - Author: mernking (gitlab.com/Godswork) - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/old_tv_lost_signal.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/old_tv_lost_signal.sksl - Preview: https://gl-transitions.com/editor/old_tv_lost_signal ## parametric_glitch A crossfade with glitchy horizontal bands and color shifts - Tags: glitch, blend - Parameters: - `ampx` (float = 1): Horizontal amplitude of the glitch - `ampy` (float = 1): Vertical amplitude of the glitch - Author: Yoni Maltsman @friendlyspinach - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/parametric_glitch.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/parametric_glitch.sksl - Preview: https://gl-transitions.com/editor/parametric_glitch ## perlin The incoming image appears through blobs of Perlin noise - Tags: noise, dissolve - Parameters: - `scale` (float = 4): Scale of the noise; higher values make smaller blobs - `smoothness` (float = 0.01): Softness of the blob edges - `seed` (float = 12.9898): Random seed - Author: Rich Harris - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/perlin.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/perlin.sksl - Preview: https://gl-transitions.com/editor/perlin ## pinwheel A spinning pinwheel reveals the incoming image - Tags: pinwheel, radial, rotate - Parameters: - `speed` (float = 2): Rotation speed - Author: Mr Speaker - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/pinwheel.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/pinwheel.sksl - Preview: https://gl-transitions.com/editor/pinwheel ## pixelize Both images pixelate, crossfade, then sharpen again - Tags: pixelate, blend - Parameters: - `squaresMin` (ivec2 = ivec2(20, 20)): Number of squares at the strongest pixelation - `steps` (int = 50): Number of pixelation steps; 0 for a continuous effect - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/pixelize.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/pixelize.sksl - Preview: https://gl-transitions.com/editor/pixelize ## polar_function A flower shape with several petals grows to reveal the incoming image - Tags: shape, wipe, polar - Parameters: - `segments` (int = 5): Number of petals - Author: Fernando Kuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/polar_function.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/polar_function.sksl - Preview: https://gl-transitions.com/editor/polar_function ## powerKaleido The image folds into an animated kaleidoscope before revealing the incoming one - Tags: kaleidoscope, distort - Parameters: - `scale` (float = 2) - `z` (float = 1.5) - `speed` (float = 5) - Author: Boundless - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/powerKaleido.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/powerKaleido.sksl - Preview: https://gl-transitions.com/editor/powerKaleido ## randomNoisex The incoming image appears pixel by pixel in random noise - Tags: dissolve, noise - Parameters: none - Author: towrabbit - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/randomNoisex.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/randomNoisex.sksl - Preview: https://gl-transitions.com/editor/randomNoisex ## randomsquares The incoming image appears in random squares - Tags: squares, grid, dissolve - Parameters: - `size` (ivec2 = ivec2(10, 10)): Number of squares (columns, rows) - `smoothness` (float = 0.5): Softness of each square's switch - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/randomsquares.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/randomsquares.sksl - Preview: https://gl-transitions.com/editor/randomsquares ## ripple Ripples spread from the center while crossfading - Tags: ripple, wave, blend - Parameters: - `amplitude` (float = 100): Frequency of the ripples - `speed` (float = 50): Speed of the ripples - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ripple.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ripple.sksl - Preview: https://gl-transitions.com/editor/ripple ## rotateTransition The images spin around the center while crossfading - Tags: rotate, spin, blend - Parameters: none - Author: haiyoucuv - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/rotateTransition.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/rotateTransition.sksl - Preview: https://gl-transitions.com/editor/rotateTransition ## rotate_scale_fade The outgoing image spins and zooms while fading to the incoming one, over a background color - Tags: rotate, zoom, fade - Parameters: - `center` (vec2 = vec2(0.5, 0.5)): Center of the rotation - `rotations` (float = 1): Number of turns - `scale` (float = 8): Maximum zoom - `backColor` (vec4 = vec4(0.15, 0.15, 0.15, 1)) [color]: Background color - Author: Fernando Kuteken - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/rotate_scale_fade.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/rotate_scale_fade.sksl - Preview: https://gl-transitions.com/editor/rotate_scale_fade ## scale-in The incoming image scales in from the center while fading in - Tags: zoom, fade - Parameters: none - Author: haiyoucuv - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/scale-in.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/scale-in.sksl - Preview: https://gl-transitions.com/editor/scale-in ## splitSlideInHorizontal The incoming image slides in as two halves moving horizontally in opposite directions - Tags: slide, split, horizontal - Parameters: - `reverse` (bool = false): Swap the directions of the halves - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInHorizontal.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInHorizontal.sksl - Preview: https://gl-transitions.com/editor/splitSlideInHorizontal ## splitSlideInOutHorizontal The halves of both images slide horizontally in opposite directions, out and in at once - Tags: slide, split, horizontal - Parameters: - `reverse` (bool = false): Swap the directions of the halves - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInOutHorizontal.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInOutHorizontal.sksl - Preview: https://gl-transitions.com/editor/splitSlideInOutHorizontal ## splitSlideInOutVertical The halves of both images slide vertically in opposite directions, out and in at once - Tags: slide, split, vertical - Parameters: - `reverse` (bool = false): Swap the directions of the halves - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInOutVertical.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInOutVertical.sksl - Preview: https://gl-transitions.com/editor/splitSlideInOutVertical ## splitSlideInVertical The incoming image slides in as two halves moving vertically in opposite directions - Tags: slide, split, vertical - Parameters: - `reverse` (bool = false): Swap the directions of the halves - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInVertical.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInVertical.sksl - Preview: https://gl-transitions.com/editor/splitSlideInVertical ## splitSlideOutHorizontal The outgoing image slides out as two halves moving horizontally in opposite directions - Tags: slide, split, horizontal - Parameters: - `reverse` (bool = false): Swap the directions of the halves - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideOutHorizontal.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideOutHorizontal.sksl - Preview: https://gl-transitions.com/editor/splitSlideOutHorizontal ## splitSlideOutVertical The outgoing image slides out as two halves moving vertically in opposite directions - Tags: slide, split, vertical - Parameters: - `reverse` (bool = false): Swap the directions of the halves - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideOutVertical.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideOutVertical.sksl - Preview: https://gl-transitions.com/editor/splitSlideOutVertical ## squareswire Squares grow along a diagonal sweep to reveal the incoming image - Tags: squares, grid, wipe, directional - Parameters: - `squares` (ivec2 = ivec2(10, 10)): Number of squares (columns, rows) - `direction` (vec2 = vec2(1, -0.5)): Direction of the sweep - `smoothness` (float = 1.6): Softness of the sweep - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/squareswire.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/squareswire.sksl - Preview: https://gl-transitions.com/editor/squareswire ## squeeze The outgoing image is squeezed into a line with color separation, revealing the incoming one - Tags: squeeze, chromatic, vertical - Parameters: - `colorSeparation` (float = 0.04): Amount of color separation - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/squeeze.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/squeeze.sksl - Preview: https://gl-transitions.com/editor/squeeze ## static_wipe A wipe from top to bottom with a band of TV static at its edge - Tags: wipe, static, noise, vertical - Parameters: - `u_transitionUpToDown` (bool = true): Wipe from top to bottom; false wipes from bottom to top - `u_max_static_span` (float = 0.5): Maximum height of the static band - Author: Ben Lucas - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/static_wipe.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/static_wipe.sksl - Preview: https://gl-transitions.com/editor/static_wipe ## swap The two images swap places in 3D, with a floor reflection - Tags: 3d, swap, reflection - Parameters: - `reflection` (float = 0.4): Strength of the reflection - `perspective` (float = 0.2): Amount of perspective - `depth` (float = 3) - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/swap.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/swap.sksl - Preview: https://gl-transitions.com/editor/swap ## tangentMotionBlur The outgoing image is flung away along a curve with motion blur - Tags: motion-blur, rotate, slide - Parameters: none - Author: chenkai - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/tangentMotionBlur.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/tangentMotionBlur.sksl - Preview: https://gl-transitions.com/editor/tangentMotionBlur ## undulatingBurnOut A circle with a wavy edge burns out from the center to reveal the incoming image - Tags: circle, burn, wipe - Parameters: - `smoothness` (float = 0.03): Softness of the edge - `center` (vec2 = vec2(0.5, 0.5)): Center of the circle - `color` (vec3 = vec3(0, 0, 0)) [color]: Color of the burning edge - Author: pthrasher - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/undulatingBurnOut.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/undulatingBurnOut.sksl - Preview: https://gl-transitions.com/editor/undulatingBurnOut ## wind A ragged left-to-right wipe, as if the image was blown away by the wind - Tags: wipe, horizontal, noise - Parameters: - `size` (float = 0.2) [range 0 to 1]: Width of the ragged edge - `reversed` (bool = false): Wipe from right to left instead - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wind.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wind.sksl - Preview: https://gl-transitions.com/editor/wind ## windowblinds A crossfade through horizontal window blinds - Tags: blinds, stripes, blend - Parameters: none - Author: Fabien Benetou - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/windowblinds.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/windowblinds.sksl - Preview: https://gl-transitions.com/editor/windowblinds ## windowslice The incoming image appears through vertical slices that widen - Tags: slices, stripes, wipe - Parameters: - `count` (float = 10): Number of slices - `smoothness` (float = 0.5): Softness of the slices' edges - Author: gre - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/windowslice.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/windowslice.sksl - Preview: https://gl-transitions.com/editor/windowslice ## wipeDown A hard-edged wipe from top to bottom - Tags: wipe, vertical - Parameters: none - Author: Jake Nelson - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeDown.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeDown.sksl - Preview: https://gl-transitions.com/editor/wipeDown ## wipeLeft A hard-edged wipe from right to left - Tags: wipe, horizontal - Parameters: none - Author: Jake Nelson - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeLeft.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeLeft.sksl - Preview: https://gl-transitions.com/editor/wipeLeft ## wipeRight A hard-edged wipe from left to right - Tags: wipe, horizontal - Parameters: none - Author: Jake Nelson - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeRight.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeRight.sksl - Preview: https://gl-transitions.com/editor/wipeRight ## wipeUp A hard-edged wipe from bottom to top - Tags: wipe, vertical - Parameters: none - Author: Jake Nelson - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeUp.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeUp.sksl - Preview: https://gl-transitions.com/editor/wipeUp ## x_axis_translation The outgoing image slides to the right, uncovering a crossfade to the incoming one - Tags: slide, horizontal, blend - Parameters: none - Author: lizhongjian - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/x_axis_translation.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/x_axis_translation.sksl - Preview: https://gl-transitions.com/editor/x_axis_translation ## zoomInOut Zooms into the outgoing image until it blurs into a flat color, then out to the incoming one - Tags: zoom, blur - Parameters: none - Author: OllyOllyOlly - License: MIT - GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/zoomInOut.glsl - SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/zoomInOut.sksl - Preview: https://gl-transitions.com/editor/zoomInOut