GSAP Integration

Use GSAP (GreenSock) to drive slide transitions instead of CSS. SliderKit fires events at the right moments — GSAP handles the animation.

Install GSAP

npm install gsap

Basic pattern

Disable the built-in CSS transition, listen to beforeSlideChange, and animate manually:

import { Slider } from '@andresclua/sliderkit'
import gsap from 'gsap'

const slider = new Slider('#el', {
  speed: 0, // disable CSS transition — GSAP takes over
  loop: true,
})

slider.on('beforeSlideChange', ({ from, to }) => {
  const slides = slider.slides

  // Slide out the current slide
  gsap.to(slides[from], {
    x: '-100%',
    opacity: 0,
    duration: 0.5,
    ease: 'power2.inOut',
  })

  // Slide in the next slide
  gsap.fromTo(
    slides[to],
    { x: '100%', opacity: 0 },
    { x: '0%', opacity: 1, duration: 0.5, ease: 'power2.inOut' },
  )
})

With ScrollTrigger

Drive the slider position with GSAP ScrollTrigger for scroll-linked slides:

import { Slider } from '@andresclua/sliderkit'
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const slider = new Slider('#el', { loop: false, speed: 0 })

ScrollTrigger.create({
  trigger: '#el',
  start: 'top top',
  end: '+=300%',
  pin: true,
  onUpdate(self) {
    const index = Math.round(self.progress * (slider.slides.length - 1))
    if (index !== slider.activeIndex) slider.slideTo(index)
  },
})

Flip animation

slider.on('beforeSlideChange', ({ from, to }) => {
  gsap.to(slider.slides[from], {
    rotationY: -90,
    duration: 0.4,
    ease: 'power1.in',
    onComplete() {
      gsap.fromTo(
        slider.slides[to],
        { rotationY: 90 },
        { rotationY: 0, duration: 0.4, ease: 'power1.out' },
      )
    },
  })
})

Tips

• Set speed: 0 to disable the wrapper translate animation — otherwise core and GSAP fight each other.
• Use beforeSlideChange to start GSAP before the active index updates, so you still have access to both from and to slide elements.
• For effects that need absolute-positioned slides (fade, flip), set position: absolute on slides and reset wrapper.style.transform as shown in the Fade Effect docs.