# Slide transition animations: slide, fade, 3D and WebGL

URL: https://gutenslider.org/slide-transition-animation-for-wordpress-slider/
Published: 2026-10-07
Updated: 2026-10-12

> How one slide replaces the next in Gutenslider: slide and fade (free), 3D, shaped and WebGL transitions (Pro), when to use which, the transition speed and reduced motion.

The transition animation decides how one slide replaces the next. Gutenslider has slide and fade in the free plugin, and 30 more with Pro: four 3D effects, six shaped effects and twenty WebGL transitions.

Slide, fade and the 3D effects, live on the [examples page](https://gutenslider.org/examples/#effects).

### Choose an effect

- Select the slider (the List View is the quickest way).
- Pick an option in **Effect**, in the slider’s settings. The effects are grouped; each one shows a short description.
- Press **Preview** in the slider’s toolbar: it runs the real slider with the effect in the editor.

### Slide and fade (free)

- **Slide** moves the slides sideways. It is the only effect that works with several slides in view, so carousels use it.
- **Fade** crossfades one slide into the next. It suits heroes with a fixed headline, quotes and photo series.

### 3D effects (Pro)

**Coverflow** tilts the neighbouring slides like album covers, ** Cards** stacks the slides like a deck, ** Cube** turns them on the sides of a cube and ** Flip** turns one slide over to show the next. Cards, Cube and Flip show one slide at a time.

### Shaped and WebGL transitions (Pro)

The six shaped effects (Morph, Parallax, Tilt, Fan, Stack and Reveal) change the slides’ shape as they move, with CSS only. The twenty WebGL transitions, such as Liquid, Ripple, Swirl, Glitch and Burn, are drawn on the graphics card over a crossfade. See them on the [examples page](https://gutenslider.org/examples/#webgl).

### Speed and timing

With Pro, **Transition time** sets how long the change takes (0.7 seconds by default) and ** Time per slide** how long each slide stays. Longer transitions suit fades and photos, short ones suit carousels. More in [Slide duration and autoplay](https://gutenslider.org/slide-duration-example/).

### Reduced motion

Visitors who turn on “reduce motion” in their operating system get a calm slider: no autoplay, and the WebGL transitions become a crossfade. You don’t need to set anything for this.