I am looking to add a fadeInUp animation effect to the text in my slider. Currently, I have a slider in place and want the next slide text to run the fadeInUp animation when the user clicks on the next slide button. I tried using animate.style (), but it only runs the animation on load. I specifically want the animation to trigger when the user clicks the next-slide button to switch slides. Can anyone provide guidance on how to achieve this using CSS, JavaScript, or jQuery? Any help would be greatly appreciated. Thank you for your assistance! Here is the HTML code for my slider:
<html>
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-container">
<div id="slide-ani" class="slide-info">
<h1>REIMAGINE GROWTH 1.</h1>
<span>Scaling exponentially, not linearly</span>
<span>Powered by digital</span>
</div>
<div class="slide-img-section">
<img src="./Images/image1.jpg" class="slide-img" alt="slider1"/>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-container">
<div class="slide-info">
<h1>REIMAGINE GROWTH 2.</h1>
<span>Scaling exponentially, not linearly</span>
<span>Powered by digital</span>
</div>
<div class="slide-img-section">
<img src="./Images/image2.jpg" class="slide-img" alt="slider1"/>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-container">
<div class="slide-info">
<h1>REIMAGINE GROWTH 3.</h1>
<span>Scaling exponentially, not linearly</span>
<span>Powered by digital</span>
</div>
<div class="slide-img-section">
<img src="./Images/image1.jpg" class="slide-img" alt="slider1"/>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-container">
<div class="slide-info">
<h1>REIMAGINE GROWTH 4.</h1>
<span>Scaling exponentially, not linearly</span>
<span>Powered by digital</span>
</div>
<div class="slide-img-section">
<img src="./Images/image2.jpg" class="slide-img" alt="slider1"/>
</div>
</div>
</div>
</div>
<div id="swiper-button-next" class="swiper-button-next"></div>
<div id="swiper-button-prev" class="swiper-button-prev"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
loop: true,
slidesPerView: 1,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
$(".swiper-button-next").on("click", function() {
// Add code here to trigger fadeInUp animation
// when user clicks on next slide button
});
</script>
</body>
</html>