Skip to content
Fix Code Error

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_

_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_

_x000D_

_x000D_

Method 2 (only the Javascript is different):

_x000D_

_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_

_x000D_

_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_

_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_

_x000D_

_x000D_

Answered By: Anonymous

Related Articles

  • After a little scroll, the sticky navbar just is not fixed…
  • Bootstrap Carousel Full Screen
  • Animating Elements in One by One
  • Why are CSS keyframe animations broken in Vue components…
  • How to prevent scrolling the whole page?
  • insert tables in dataframe with years from 2000 to 20018…
  • Bootstrap v4 carousel not working
  • Android Layout Animations from bottom to top and top to…
  • Watch $route.params.slug doesn't triggered vuejs
  • When I use '/js/app.js' on my Laravel view my Bootstrap…

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

Post navigation

Previous Post:

How to return multiple regex values as a tuple

Next Post:

How to get the difference value from table – django?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error