Clip-path effect

Slides are revealed using CSS clip-path animations. Six built-in shapes plus full support for custom clip-path values.

Installation

npm install @andresclua/sliderkit-effects

Usage

import { Slider } from '@andresclua/sliderkit'
import { clipPathEffect } from '@andresclua/sliderkit-effects'

new Slider('#el', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [clipPathEffect({ shape: 'wipe-right', duration: 600 })],
})

Options

Option	Type	Default	Description
shape	ClipPathPreset | ClipPathCustom | ClipPathDirectional	'wipe-right'	Preset name, custom clip object, or { forward, backward } for per-direction shapes.
duration	number	slider speed	Transition duration in milliseconds.
easing	string	'ease-in-out'	Any CSS easing function.
directionAware	boolean	true	Reverses the wipe direction when navigating backward (only applies to wipe presets).

Built-in presets

Preset	Description
'wipe-right'	Reveals left to right
'wipe-left'	Reveals right to left
'wipe-down'	Reveals top to bottom
'wipe-up'	Reveals bottom to top
'circle'	Expands from center as a circle
'diamond'	Expands from center as a diamond

Direction-aware shapes

Pass { forward, backward } to shape to use a completely different effect depending on which arrow was clicked. Each value accepts a preset name or a custom shape object — you can mix both freely.

// preset forward, custom backward
clipPathEffect({
  shape: {
    forward:  'wipe-down',
    backward: {
      hidden:  'circle(0% at 85% 85%)',
      visible: 'circle(170% at 85% 85%)',
    },
  },
  duration: 800,
  easing: 'ease-in-out',
})

Custom shape

Pass an object instead of a preset name. Define any valid clip-path values for the hidden and visible states. Both values must use the same function type (both polygon(), both inset(), etc.) for the browser to interpolate between them.

clipPathEffect({
  shape: {
    hidden:  'polygon(0 0, 0 0, 0 100%, 0 100%)',   // fully clipped (left edge)
    visible: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)', // fully revealed
    hiddenReverse: 'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)', // reversed start
  },
  duration: 700,
  easing: 'cubic-bezier(0.77, 0, 0.18, 1)',
})

How it works

1. All slides stack with position: absolute. The slider's translate is neutralised.
2. The outgoing slide stays at z-index: 1 beneath the incoming.
3. The incoming slide is placed at z-index: 2 with clip-path set to the hidden state, then animated to the visible state.
4. After the transition ends, clip-path and z-index are cleaned up.

Notes

• Only works with items: 1.
• Both hidden and visible clip-path values must use the same CSS function type so the browser can interpolate between them.
• No overflow: hidden issues — clip-path doesn't require a 3D rendering context.

Demo

See the clip-path demos →