Javascript text animation not triggering

June 29, 2021 by Code Error

Posted By: Anonymous

I have a Bootstrap 5 carousel with two lines of caption per slide. Each time right before the slide changes, I want the old top caption to move up and fade out, and the old bottom caption to move down and fade out. Then on the next slide, the new top caption should move down into place and fade in and the new bottom caption should move up into place and fade in.

I’m a novice coder and I’m doing this as an excercise. You can see the code I’ve written for this below, or in this CodePen. I’ve tried it two ways, the second method is commented in the JS section in CodePen.

I’ve also added a responsive section to the CSS so you can kind of see what I want to happen: the animation is triggered at a window width of 600px.

The same animation doesn’t trigger when the slides change, though. Why not? How can I make it better?

Method 1:

_x000D_

import * as jquery from "https://cdn.skypack.dev/[email protected]";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
const SlideClass = ("slide");

$('#CarouselTextAnim').on('slide.bs.carousel', function() {
    TopCap.classlist.addClass(SlideClass);
    BottomCap.classlist.addClass(SlideClass);
});

$('#CarouselTextAnim').on('slid.bs.carousel', function() {
    TopCap.classlist.removeClass(SlideClass);
    BottomCap.classlist.removeClass(SlideClass);
});

_x000D_

.h1-carousel {
    width: 100%;
    text-align: center;
    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: 4vw;
    transition: 0.4s;
}

.carousel-caption {
    position: absolute;
    top: 40%;
    opacity: 1;
    transition: 0.4s;
}

.carousel-caption.slide {
    top: 0;
    opacity: 0;
}

.caption-bottom {
    position: relative;
    bottom: 4vh;
    opacity: 1;
    transition: 0.4s;
}

.caption-bottom.slide {
    bottom: -30vh;
    opacity: 0;
}

@media (max-width: 600px) {
  .carousel-caption {
      top: 0;
      opacity: 0;
}
  .caption-bottom {
      bottom: -30vh;
      opacity: 0;
  }
}

_x000D_

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Carousel text anim</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
  <section class="slideshow">
    <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
      <div class="carousel-inner">
        <div class="carousel-item active" >
          <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="">
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          <div class="carousel-caption">    
            <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>    
</div>

    <script src="script.js"></script>   
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </body>

_x000D_

Method 2 (only the Javascript is different):

_x000D_

import * as jquery from "https://cdn.skypack.dev/[email protected]";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");

$('#CarouselTextAnim').on('slide.bs.carousel', function() {
    TopCap.setAttribute('top', '0');
    TopCap.setAttribute('opacity', '0');
    BottomCap.setAttribute('bottom', '0');
    BottomCap.setAttribute('opacity', '0');
});

$('#CarouselTextAnim').on('slid.bs.carousel', function() {
    TopCap.setAttribute('top', '40%');
    TopCap.setAttribute('opacity', '1');
    BottomCap.setAttribute('bottom', '4vh');
    BottomCap.setAttribute('opacity', '1');
});

_x000D_

.h1-carousel {
    width: 100%;
    text-align: center;
    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: 4vw;
    transition: 0.4s;
}

.carousel-caption {
    position: absolute;
    top: 40%;
    opacity: 1;
    transition: 0.4s;
}

.carousel-caption.slide {
    top: 0;
    opacity: 0;
}

.caption-bottom {
    position: relative;
    bottom: 4vh;
    opacity: 1;
    transition: 0.4s;
}

.caption-bottom.slide {
    bottom: -30vh;
    opacity: 0;
}

@media (max-width: 600px) {
  .carousel-caption {
      top: 0;
      opacity: 0;
}
  .caption-bottom {
      bottom: -30vh;
      opacity: 0;
  }
}

_x000D_

<head>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Carousel text anim</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
  <section class="slideshow">
    <div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
      <div class="carousel-inner">
        <div class="carousel-item active" >
          <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="">
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          <div class="carousel-caption">    
            <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>    
</div>

    <script src="script.js"></script>   
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  </body>

_x000D_

Solution

You are mixing jQuery libraries in your pen, as well as mixing vanilla js with jQuery, just stick to one, I’d suggest vanilla.

I did not go your styles entirely to find out which class it uses to handle that bottom effect, which you will have to update, but the top element is working.

Also unlike using jQuery’s $ to select elements, when using vanilla js const TopCap = document.querySelector (".carousel-caption"); and have several elements as in each slide, you would have to loop through them and select them all as follow: const TopCap = document.querySelectorAll (".carousel-caption");

_x000D_

const TopCap = document.querySelectorAll(".carousel-caption");
const BottomCap = document.querySelectorAll(".caption-bottom");

var myCarousel = document.querySelector('#CarouselTextAnim')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: true
})

myCarousel.addEventListener('slid.bs.carousel', function () {
  TopCap.forEach(cap=>cap.classList.remove('slide'));  
  BottomCap.forEach(cap=>cap.classList.remove('slide'));
});

myCarousel.addEventListener('slide.bs.carousel', function () {
  TopCap.forEach(cap=>cap.classList.add('slide'));  
  BottomCap.forEach(cap=>cap.classList.add('slide'));
});

_x000D_

.h1-carousel {
    width: 100%;
    text-align: center;
    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: 4vw;
    transition: 0.4s;
}

.carousel-caption {
    position: absolute;
    top: 40%;
    opacity: 1;
    transition: 0.4s;
}

.carousel-caption.slide {
    top: 0;
    opacity: 0;
}

.caption-bottom {
    position: relative;
    bottom: 4vh;
    opacity: 1;
    transition: 0.4s;
}

.caption-bottom.slide {
    bottom: -30vh;
    opacity: 0;
}

@media (max-width: 600px) {
  .carousel-caption {
      top: 0;
      opacity: 0;
}
  .caption-bottom {
      bottom: -30vh;
      opacity: 0;
  }
}

_x000D_

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>Carousel text anim</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <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">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="container-fluid" style="padding: 0" id="carousel">
  <section class="slideshow">
    <div id="CarouselTextAnim" class="carousel slide carousel-slide">
      <div class="carousel-inner">
        <div class="carousel-item active" >
          <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="">
          <div class="carousel-caption">
            <h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
          <div class="carousel-caption">
            <h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
          </div>
        </div>
        <div class="carousel-item">
          <img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
          <div class="carousel-caption">    
            <h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
            <h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
        <span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
        <span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>    
</div>

_x000D_

Answered By: Anonymous

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Javascript text animation not triggering

Posted By: Anonymous

Solution

Answered By: Anonymous

Related Articles

Leave a Reply Cancel reply