title: Captions in Bootstrap Carousel animate diagonally instead of vertically
body: <p>I have a Bootstrap 5 carousel with three slides, each with two lines of captions. The captions are supposed to move vertically up and down out of frame each time a slide changes. But since they are attached to the slides, which move horizontally, they end up moving out of frame diagonally.</p>
  <p>Is there a way to fix this?</p>
  <p>I've tried to compensate by moving the captions horizontally in the opposite direction, but that just results in them entering the frame diagonally on the next slide.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const topcap = document.querySelectorAll(".caption-top");
  const bottomcap = document.querySelectorAll(".caption-bottom");
  const SlideClass = ("slide");
  var TCarousel = document.querySelector('#TestCarousel');
  
  TCarousel.addEventListener('slide.bs.carousel', function() {
    topcap.forEach(cap =&gt; cap.classList.add(SlideClass));
    bottomcap.forEach(cap =&gt; cap.classList.add(SlideClass));
  });
  
  TCarousel.addEventListener('slid.bs.carousel', function() {
    topcap.forEach(cap =&gt; cap.classList.remove(SlideClass));
    bottomcap.forEach(cap =&gt; cap.classList.remove(SlideClass));
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-inner .carousel-item {
    transition: transform 1s ease;
  }
  
  .carousel-caption {
    position: absolute;
    left 0;
    top: 33%;
    color: white;
    text-shadow: 1px 1px 2px rgba(2, 15, 19, 0.70);
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 4.5vw;
    transition: 1s ease;
  }
  
  .caption-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 1;
    transition: 1s ease;
  }
  
  .caption-top.slide {
    font-size: 2vw;
    top: -70%;
    opacity: 1;
  }
  
  .caption-bottom {
    position: relative;
    top: 15%;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 1;
    transition: 1s ease;
  }
  
  .caption-bottom.slide {
    font-size: 2vw;
    top: 140%;
    opacity: 1;
  }
  
  @media (min-width: 993px) and (max-width: 1200px) {
    .carousel-inner .carousel-item {
      margin-top: 70px;
    }
  }
  
  @media (max-width: 992px) {
    .carousel-inner .carousel-item {
      margin-top: 52px;
    }
  }
  
  @media (max-width: 776px) {
    .carousel-caption {
      font-size: 5vw;
    }
    .caption-top-slide,
    .caption-bottom-slide {
      font-size: 2vw;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width initial-scale=1.0"&gt;
    &lt;title&gt;Carousel text anim&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container-fluid p-0 mb-5" id="carousel"&gt;
      &lt;section class="slideshow"&gt;
        &lt;div id="TestCarousel" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="2000" data-bs-pause="false"&gt;
          &lt;div class="carousel-inner"&gt;
            &lt;div class="carousel-item active"&gt;
              &lt;img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;span id="carousel1" class="h1-carousel mb-5 caption-top"&gt;TOP CAPTION&lt;/span&gt;
                &lt;span class="h1-carousel mb-5 caption-bottom"&gt;BOTTOM CAPTION&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;span class="h1-carousel edit1 mb-5 caption-top"&gt;UP TOP&lt;/span&gt;
                &lt;span class="h1-carousel mb-5 caption-bottom"&gt;DOWN LOW&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="carousel-item"&gt;
              &lt;img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt=""&gt;
              &lt;div class="carousel-caption"&gt;
                &lt;span class="h1-carousel edit1 mb-5 caption-top"&gt;OVER &amp;#38;&lt;/span&gt;
                &lt;span class="h1-carousel mb-5 caption-bottom"&gt;UNDER&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button class="carousel-control-prev" type="button" data-bs-target="#TestCarousel" data-bs-slide="prev"&gt;
                  &lt;span class="carousel-control carousel-control-prev-icon" style="display: none" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="visually-hidden"&gt;Previous&lt;/span&gt;
              &lt;/button&gt;
          &lt;button class="carousel-control-next" type="button" data-bs-target="#TestCarousel" data-bs-slide="next"&gt;
                  &lt;span class="carousel-control carousel-control-next-icon" style="display: none" aria-hidden="true"&gt;&lt;/span&gt;
                  &lt;span class="visually-hidden"&gt;Next&lt;/span&gt;
              &lt;/button&gt;
        &lt;/div&gt;
      &lt;/section&gt;
    &lt;/div&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>