Sliding animation in ReactJS

Question

I am currently building a carousel from scratch. I manage to build the whole mechanism but I am failing at adding animations. I would like to make a sliding effect. I've looked up every libraries available, but I don't understand how they work. I am new to react and I've never used animation before nor libraries.

Here is the code of my carousel.

import JobCard from './JobCard';
import BlocSection from './BlocSection';
import axios from 'axios';
import '../assets/Carousel.scss';
import next from '../assets/img/next.png';
import back from '../assets/img/back.png';



export default class CarouselNew extends Component {

   constructor(props) {
   super(props);
   this.state ={
       jobs : [],
       position : 0
   };
}

  async componentDidMount() {

       try{
               const jobs = await axios.get("API LINK", {responseType : "json"})
               console.log('response : ', jobs)
               this.setState({jobs : jobs.data})

       }catch(e){
           console.log(e)
       }

 }


  changePositionNext(){
       {this.state.position < this.state.jobs.length-3 ? (this.setState({position : this.state.position +3})) 
       : (this.setState({position : 0})) }

}

   changePositionPrev(){
       {this.state.position == 0 ? (this.setState({position : this.state.jobs.length-3})) 
       : (this.setState({position :  this.state.position -3})) }
}





   render(){
       let selected = [];

      selected = this.state.jobs.length >0 ? this.state.jobs.slice(this.state.position, this.state.position +3) : []

       console.log('position : ', this.state.position);
       console.log('selected : ', selected);

       return(
           <div className='main_container' id='job'>
               <BlocSection section_title={"Nos offres d'emploi"} section_intro={'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi alias iste ducimus tenetur saepe reprehenderit quasi reiciendis ab architecto.'} />
               <div className='slider_container'>
                   <div onClick={() => this.changePositionPrev()} className="arrow_container"><img src={back} alt="" className="arrow"/></div>

                   {this.state.position === this.state.jobs.length-2 || this.state.position === this.state.jobs.length-1 && this.state.jobs.length %3 != 0 ? (this.setState({position : this.state.jobs.length-3})) : null}

                   {this.state.position === -2 || this.state.position === -1 && this.state.jobs.length %3 != 0 ? (this.setState({position : 0})) : null}

                   <div className="card_container">

                       {selected.map(job =>{
                           const title = job.title.rendered;
                           const description = job.acf.job_description;
                           const lien = job.acf.job_linkedin_url;
                           console.log('title : ', title);
                           return(
                               <JobCard key={title} title={title} description={description} lien={lien} />     
                               );
                           })}

                   </div>



                   <div onClick={() => this.changePositionNext()} className="arrow_container"><img src={next} alt="" className="arrow"/></div>

               </div>      

           </div>

       )



}
}

I was thinking about adding a class on click and do the animation in CSS, but I've tried and it is not working. My real problem is I am not quite used to JSX syntax and I always end up with bugs I don't understand.

Does anyone have a solution ?

Thank you so much for your help :)

Answer 1

To animate an element in CSS you have a number of possibilities.

You could use a transform:

transition: transform 0.2s ease-in-out;
transform: translateX(0);

.class-that-animates {
   transform: translateX(10px);
}

Or you could add an animation through keyframes:

animation: slide 0.5s forwards;
left: 0px;

@keyframes slide {
  100% { left: 10px; }
}

I prefer the former, and you can swap out translateX for many properties