Question

0

136

Vistas

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

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!

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-05T03:44:50.949Z

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;
}

Answer 2 · 2022-07-05T03:44:50.957Z

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

0

136

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

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT