Effects & transitions

Set effect to any of 40 transitions. Every one of them is a function of the slide's position, so dragging scrubs it and releasing continues with your finger's speed.

<style>
  label { font: 14px system-ui; display: block; margin-bottom: 12px; }
  select { font: 14px system-ui; padding: 6px 10px; border-radius: 8px; margin-left: 6px; }
</style>
<label>Effect <select id="fx"></select></label>
<div id="s">
  <div><img data-bg src="https://picsum.photos/id/1018/1400/900" alt="Mountains"></div>
  <div><img data-bg src="https://picsum.photos/id/1036/1400/900" alt="Snow"></div>
  <div><img data-bg src="https://picsum.photos/id/1043/1400/900" alt="City"></div>
  <div><img data-bg src="https://picsum.photos/id/1050/1400/900" alt="Sea"></div>
</div>

<script type="module">
  const slider = new InsigneSlider('#s', { effect: 'cube', aspect: '16/9' });
  const sel = document.querySelector('#fx');
  for (const name of InsigneSlider.effects) sel.add(new Option(name, name, false, name === 'cube'));
  sel.onchange = () => {
    slider.update({ effect: sel.value });
    slider.next();
  };
</script>

Loading preview…

Live previewEdit in playground →

CSS effects (27)

Family	Effects
Movement	slide (default), parallax, stack, uncover
Fade & focus	fade, blur, zoom
3D	cube, flip, coverflow, cards, rotate, creative
Masks	wipe, curtain, iris, diagonal, blinds, split, shutter, boxes, diamond, clock
Expressive	warp, product, sketch, glitch

coverflow and slide support several slides per view; the others show one slide at a time.

Tuning

• speed (ms) and ease (auto, expo.out, power3.out, back.out…).
• coverflowRotate, coverflowDepth, coverflowStretch, slideShadows.
• creative: describe the previous and next slide yourself:

new InsigneSlider(el, {
  effect: 'creative',
  creative: {
    prev: { translate: ['-20%', 0, -400], rotate: [0, 0, -6], opacity: 0.4 },
    next: { translate: ['100%', 0, 0] },
  },
});

WebGL effects (13)

heat-haze, ripple, liquid, rgb-glitch, pixel-dissolve, zoom-blur, swirl, page-curl, ink, god-rays, warp-speed, water, luma-morph — and random-gl for a different one on every change.

<insigne-slider effect="ripple" shader-origin="pointer" shader-intensity="1.2">

• The shader chunk (~8 KB gzip) loads only when a WebGL effect is used.
• Radial effects start from the click (shaderOrigin: "pointer"), the center or a custom point.
• Fallback: without WebGL, on low-power devices (gpu: "auto"), under reduced motion, or when an image has no CORS headers, a matching CSS effect plays instead. Images on another domain need Access-Control-Allow-Origin.

Reduced motion

With prefers-reduced-motion, 3D and WebGL effects become fade, transitions are shortened, autoplay and Ken Burns are off, layers appear without motion. Override with reducedMotion: "never" only if your slider has no large motion.