🛠 Carousel: Animations

We switch slides by changing .carousel__contents’s left property. You can transition this property to animate the carousel.

.carousel__contents {
  /* ... */
  transition: left 0.3s ease-out;
}

But this transition creates jank. If you want smooth animations, you need to use transform instead of left.

Switching slides with transforms

To switch slides with transforms, you need two things:

1. You need to set the correct transform value with JavaScript.
2. You need to create a transition for the transform property.

The correct transform value is the same as the correct left value. This applies for all three event listeners.

// remove this
contents.style.left = '-' + destination

// replace with this
contents.style.transform = 'translateX(-' + destination + ')'

To transition the transform property, you set transform in transition.

/* replace with this */
.carousel__contents {
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}