Flip effect

Slides flip on the Y axis like turning a card. Direction-aware — flips forward or backward depending on how you navigate.

Installation

npm install @andresclua/sliderkit-effects

Usage

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

new Slider('#el', {
  items: 1,
  loop: false,
  speed: 300,
  plugins: [flipEffect({ duration: 500, easing: 'ease-in-out', perspective: 800 })],
})

Options

OptionTypeDefaultDescription
duration number slider speed Total flip duration in ms. Each phase (out + in) takes half this value.
easing string 'ease-in-out' Any CSS easing function.
perspective number 800 Perspective distance in px. Lower values = more dramatic 3D depth.

How it works

  1. Slides stack with position: absolute; the slider's translate is neutralised.
  2. Each slide uses perspective(Npx) rotateY() inline in its own transform — no parent perspective needed.
  3. The animation is sequential: the outgoing slide rotates to ±90° first (first half of duration), then the incoming slides in from ∓90° to 0° (second half). The two phases never overlap.
  4. backface-visibility: hidden prevents the reverse face showing mid-flip.

Notes

  • Only works with items: 1.
  • Recommended with loop: false or rewind: true.
  • The plugin temporarily removes overflow: hidden from any clipping ancestor and will-change: transform from the track — both are restored on destroy().

Demo

See the flip demo →