Contents

• Steps
  • 1. Install React Transition Group
  • 2. Update Your CSS File
  • 3. Add SwitchTransition and CSSTransition
• Animations
  • Fade
  • Slide
  • Scale
  • Skew
  • Fade Right
  • Fade Left
  • Fade Up
  • Fade Down
  • Scale Skew
  • Skew Fade

Steps

1. Install React Transition Group

Install the react-transition-group package:

npm i react-transition-group

If you’re using TypeScript, install the types:

npm install @types/react-transition-group

2. Update Your CSS File

Paste the animation you want from the list below into your index.css file:

.fade-enter{
  opacity: 0;
}
.fade-exit{
  opacity: 1;
}
.fade-enter-active{
  opacity: 1;
}
.fade-exit-active{
  opacity: 0;
}
.fade-enter-active,
.fade-exit-active{
  transition: opacity 500ms;
}

3. Add SwitchTransition and CSSTransition

Wrap the component you want to animate with a SwitchTransition:

{selectedFeature && (
          <SwitchTransition>
            <CSSTransition
            key={selectedFeature.name}
            timeout={500}
              appear={true}
              addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
              classNames="scale-skew"
            >
              <div className="w-full">
                <div className="mt-4 text-start text-xl flex flex-col">
                  <h2 className="text-2xl font-bold mb-4">
                    {selectedFeature.name}
                  </h2>
                  {selectedFeature.description.map((item, index) => (
                    <div key={index}>{item}</div>
                  ))}
                </div>
              </div>
            </CSSTransition>
          </SwitchTransition>
        )}

Don’t forget to add a unique key to the SwitchTransition component since without it, the animation will loop forever.

Animations

Fade

.fade-enter{
   opacity: 0;
}
.fade-exit{
   opacity: 1;
}
.fade-enter-active{
   opacity: 1;
}
.fade-exit-active{
   opacity: 0;
}
.fade-enter-active,
.fade-exit-active{
   transition: opacity 500ms;
}

Slide

.slide-enter {
  transform: translateX(-100%);
}

.slide-enter-active {
  transform: translateX(0);
}

.slide-exit {
  transform: translateX(0);
}

.slide-exit-active {
  transform: translateX(100%);
}

.slide-enter-active,
.slide-exit-active {
  transition: transform 500ms;
}

Scale

.scale-enter {
  transform: scale(0);
}

.scale-enter-active {
  transform: scale(1);
}

.scale-exit {
  transform: scale(1);
}

.scale-exit-active {
  transform: scale(0);
}

.scale-enter-active,
.scale-exit-active {
  transition: transform 500ms;
}

Skew

.skew-enter {
  transform: skew(20deg);
}

.skew-enter-active {
  transform: skew(0deg);
}

.skew-exit {
  transform: skew(0deg);
}

.skew-exit-active {
  transform: skew(20deg);
}

.skew-enter-active,
.skew-exit-active {
  transition: transform 500ms;
}

Fade Right

.fade-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.fade-right-enter-active {
  opacity: 1;
  transform: translateX(0);
}

.fade-right-exit {
  opacity: 1;
  transform: translateX(0);
}

.fade-right-exit-active {
  opacity: 0;
  transform: translateX(100%);
}

.fade-right-enter-active,
.fade-right-exit-active {
  transition: opacity 500ms, transform 500ms;
}

Fade Left

.fade-left-enter {
  opacity: 0;
  transform: translateX(100%);
}

.fade-left-enter-active {
  opacity: 1;
  transform: translateX(0);
}

.fade-left-exit {
  opacity: 1;
  transform: translateX(0);
}

.fade-left-exit-active {
  opacity: 0;
  transform: translateX(-100%);
}

.fade-left-enter-active,
.fade-left-exit-active {
  transition: opacity 500ms, transform 500ms;
}

Fade Up

.fade-up-enter {
  opacity: 0;
  transform: translateY(50%);
}

.fade-up-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-exit {
  opacity: 1;
  transform: translateY(0);
}

.fade-up-exit-active {
  opacity: 0;
  transform: translateY(-50%);
}

.fade-up-enter-active,
.fade-up-exit-active {
  transition: opacity 500ms, transform 500ms;
}

Fade Down

.fade-down-enter {
  opacity: 0;
  transform: translateY(-50%);
}

.fade-down-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.fade-down-exit {
  opacity: 1;
  transform: translateY(0);
}

.fade-down-exit-active {
  opacity: 0;
  transform: translateY(50%);
}

.fade-down-enter-active,
.fade-down-exit-active {
  transition: opacity 500ms, transform 500ms;
}

Scale Skew

.scale-skew-enter {
  transform: scale(0) skew(90deg);
}

.scale-skew-enter-active {
  transform: scale(1) skew(0deg);
}

.scale-skew-exit {
  transform: scale(1) skew(0deg);
}

.scale-skew-exit-active {
  transform: scale(0) skew(90deg);
}

.scale-skew-enter-active,
.scale-skew-exit-active {
  transition: transform 500ms;
}

Skew Fade

.skew-fade-enter {
  opacity: 0;
  transform: skew(20deg);
}

.skew-fade-enter-active {
  opacity: 1;
  transform: skew(0deg);
}

.skew-fade-exit {
  opacity: 1;
  transform: skew(0deg);
}

.skew-fade-exit-active {
  opacity: 0;
  transform: skew(20deg);
}

.skew-fade-enter-active,
.skew-fade-exit-active {
  transition: opacity 500ms, transform 500ms;
}