I created a carousel with React.js, it was simple until I arrived at the animation problem. The carousel is classic, it is composed of slides of content, of small bullets indicating the current slide, and of small thumbnails for navigating between the slide.
The carousel component is data-driven, meaning that it is passed its content as a javascript array of objects. Each slide is a li
tag within a ul
, and just have to change the margin-left
css property of the ul
to move from one slide to another.
I'm wondering if I should use the ReactTransitionGroup
or ReactCSSTransitionGroup
to animate the transition from one slide to another. Basically the transition is a sliding effect from left to right when going from one slide to another.
My understanding is that the ReactTransitionGroup
s API is helpful when adding or removing some content. Here I won't add/remove any slide, change changing the visible one with an animation.
My difficulty wrapping my head around this is that I developped a static (aka without animation) carousel where the currently displayed slide is the only state saved in the component. This state is just the index of the slide in the array of slides. So when I click a thumbnail to navigate slide number n
, the only thing I do is updating this internal state, then the rendering takes care of setting the left
style property based on this index.
I don't see how I can add animation to this carousel. Any help/hint greatly appreciated.