Repeated animations on a Slick carousel

Given that the WOW.js library is a Scroll Reveal library, it means that animations are triggered when the element comes into the viewport as you scroll. However, when using a carousel like Slick, all the paragraphs in the slides are in the same horizontal position. Therefore, they all get animated simultaneously as they are in the same scroll position. Using `delay` and `repeat` might not provide a fundamental solution. Instead, it might be better to handle this with a custom JavaScript code that integrates the animations with Slick's events, something like the code below:

(function ($, Drupal) {
  Drupal.behaviors.animateCarousel = {
    attach: function (context, settings) {
      $('.your-carousel-class', context).once('animateCarousel').each(function () {
        var $carousel = $(this);

        $carousel.on('afterChange', function(event, slick, currentSlide) {
          // Remove previous animation classes
          $('.slick-slide', $carousel).find('.wow').removeClass('animate__animated animate__slideInLeft animate__flipInX');

          // Add animation classes to the current slide
          $(slick.$slides[currentSlide]).find('.wow').addClass('animate__animated animate__slideInLeft');

          // Add animation classes to the text elements
          $(slick.$slides[currentSlide]).find('p').addClass('animate__animated animate__flipInX');
        });

        // Initialize the carousel
        $carousel.slick({
          // Add your carousel settings here
        });
      });
    }
  };
})(jQuery, Drupal);

This quick solution is what came to my mind for your request. Of course, there might be other and possibly better ways to achieve this, but I wanted to suggest the fastest way to address your issue first.

I hope this helps you. Please let me know if you have any further questions or need additional assistance. please feel free to report back here.

This is Drupal 10.3.1 and I could not get past Uncaught TypeError: $(...).once is not a function. When I managed to get past it I can't tell why the code is not working either the changes I made or the code itself. I guess .slick--field-slider should be okay for .your-carousel-class?

I can remove all the animation classes I added on the carousel so this code can add the classes afresh without having to remove and append to existing classes.

Thank you.