Trying to add animations to divs on their appearance and disappearance using React-CodePudding

Let me explain you the scenario,

I have 3 links/toggle buttons (Link 1, Link 2 & Link 3) and 3 DIVS (Div 1, Div 2 & Div 3).

I am trying to add animations to DIVS,

When I click on Link 1 above, Div 1 has to appear in center (Animation: Fade-In-Up).
Similarly when I click on Link 3 then Div 1 and Div 3 should appear in center (Animation: Fade-In-Up).
And also when I click on Link 2 then Div 1 and Div 2 should make way for Div 2 (Animation: Fade-In-Up) by moving towards their respective sides.

All the 3 DIVs has to be centered,

And if I re-click on Link 2, then Div 2 should disappear by moving towards Y direction (Animation: Fade-Out-Down), and Div 1 and Div 3 should come closer by moving towards each other and centered.

Kindly help me with this, struggling with this for so many days. Thanks in Advance. Refer this image for better understanding!

CodePudding user response：

you can try something like this: https://codepen.io/MSanbira/pen/wvmKqNe

CSS section:

.div-section {
  position: relative;
  --total: 3;
}

.div-section > div {
  --size: 200px;
  --gap: 24px;
  position: absolute;
  top: 0;
  left: calc(
    50% - var(--size) / 2 - 
    (var(--num-selected) - var(--place) * 2   1) * (var(--size) / 2   var(--gap) / 2)
  );
  height: var(--size);
  width: var(--size);
  background: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

.div-section > div:not([data-selected="true"]) {
  top: 250px;
  left: calc(
    50% - var(--size) / 2 - 
    (var(--total) - var(--place) * 2   1) * var(--size) / 4
  );
  opacity: 0;
}

CodePudding user response：

I have been using WOW js with HTML but haven't explored it on React

Try wow js https://www.npmjs.com/package/react-wow