I'm trying to animate some inner text and image inside the slider ,
it works nice for the first slide first time it render,
but from the second slide it does weird behavior,
the element is appear in normal with no animation then its start to animate.
i don't use carousel caption instead i use my on styled tags to add text.
this is the component :
import React, { useState } from "react";
import { Row, Col } from "react-bootstrap";
import Carousel from "react-bootstrap/Carousel";
import athletImg from "../../../assets/img/products_carousel/athlet.webp";
import athletProduct from "../../../assets/img/products_carousel/iv__NAC.jpg";
import "./productsMainCarousel.css";
const ProductsMainCarousel = () => {
const [index, setIndex] = useState(0);
const handleSelect = (selectedIndex, e) => {
setIndex(selectedIndex);
};
return (
<Carousel
className="products_main_carousel"
activeIndex={index}
onSelect={handleSelect}
variant="dark"
>
<Carousel.Item>
<Row>
<Col md={6}>
<img className="d-block w-100" src={athletImg} alt="First slide" />
</Col>
<Col
md={6}
className="d-flex flex-column justify-content-center px-5"
>
<div className="m-5">
<div className="d-flex justify-content-start">
<img
src={athletProduct}
className="scale-up-center product_img mb-3"
alt="product_img"
/>
</div>
<h1 className="slide-left">Workout Boost</h1>
<p>
Whether you are getting ready for a marathon or you just
finished a bootcamp class, this treatment can give you the
energy you need to perform...
</p>
<div className="mt-3">
<h6>INCLUDES:</h6>
<div className="includes">
<div className="includes_squre"></div>
Normal Saline
</div>
<div className="includes">
<div className="includes_squre"></div>
Glutamine: Amino Acid
</div>
<div className="includes">
<div className="includes_squre"></div>
Vitamin B12
</div>
<div className="includes">
<div className="includes_squre"></div>
L-Arginine: Amino Acid
</div>
</div>
</div>
</Col>
</Row>
</Carousel.Item>
<Carousel.Item>
<Row>
<Col md={6}>
<img className="d-block w-100" src={athletImg} alt="First slide" />
</Col>
<Col
md={6}
className="d-flex flex-column justify-content-center px-5"
>
<div className="m-5">
<div className="d-flex justify-content-start">
<img
src={athletProduct}
className="scale-up-center product_img mb-3"
alt="product_img"
/>
</div>
<h1 className="slide-left">Workout Boost</h1>
<p>
Whether you are getting ready for a marathon or you just
finished a bootcamp class, this treatment can give you the
energy you need to perform...
</p>
<div className="mt-3">
<h6>INCLUDES:</h6>
<div className="includes">
<div className="includes_squre"></div>
Normal Saline
</div>
<div className="includes">
<div className="includes_squre"></div>
Glutamine: Amino Acid
</div>
<div className="includes">
<div className="includes_squre"></div>
Vitamin B12
</div>
<div className="includes">
<div className="includes_squre"></div>
L-Arginine: Amino Acid
</div>
</div>
</div>
</Col>
</Row>
</Carousel.Item>
{/* <Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=282c34"
alt="Second slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slide&bg=20232a"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
</p>
</Carousel.Caption>
</Carousel.Item> */}
</Carousel>
);
};
export default ProductsMainCarousel;<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>.products_main_carousel .product_img{
height: 140px;
}
.includes{
display: flex;
/* justify-content: center; */
align-items: center;
}
.includes .includes_squre{
height: 10px;
width: 10px;
background: var(--main-color);;
margin-right: 8px;
}
.carousel-control-next,
.carousel-control-prev {
width: 8%;
}
.active .scale-up-center {
-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
* Generated by Animista on 2022-5-29 11:14:4
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation scale-up-center
* ----------------------------------------
*/
@-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* ----------------------------------------------
* Generated by Animista on 2022-5-29 11:8:7
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-left
* ----------------------------------------
*/
@-webkit-keyframes slide-left {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slide-left {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.active .slide-left {
-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}