I want two elements to occupy the same space when they animate in and out

[BrianT]

Hello,

 

I want Element A and Element B to both occupy the same spot when they animate in and out. I know that changing the opacity does not remove the element so they still stay "stacked" however I just can't seem to find a way to accomplish the desired behavior.

 

Hopefully this sandbox makes it easier to understand what I want to do. 

 

https://codesandbox.io/s/dazzling-rumple-hzd7c?file=/src/App.vue

[PointC]

Maybe I'm missing something here, but wouldn't setting position:absolute work?

 

.parent {
  position: relative;
}
.a,
.b {
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  white-space: nowrap;
}

 

[nico fonseca]

If you need the elements rendered at the same time, use position:absolute as @PointC said, but if you don't, you can use vue transition hooks and call your animations on the enter/leave methods.

[BrianT]

34 minutes ago, PointC said:

Maybe I'm missing something here, but wouldn't setting position:absolute work?

 

.parent {
  position: relative;
}
.a,
.b {
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  position: absolute;
  white-space: nowrap;
}

 

Thanks for the response!

 

It does work but I wanted to keep the elements inside the flex container so it creates a new problem. 

https://codesandbox.io/s/dazzling-rumple-hzd7c?file=/src/App.vue

 

I know this is more of a CSS problem and not GSAP so sorry about that. Folks here are really helpful and responsive though.

[PointC]

I see. Maybe you can set just .b to absolute so your button wrapper will take the size of .a.

 

.parent {
  position: relative;
}
.a,
.b {
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.a {
  background: teal;
}
.b {
  background: crimson;
  position: absolute;
}

Then use a little GSAP magic.

gsap.set(".b", { yPercent:-100, x: 400, opacity: 0 });

Or skip the GSAP magic and do it all with CSS.

.b { background: crimson; position: absolute; right: 0; top: 0; }

 

 

Does that help?

 

[BrianT]

Thank you PointC! That is what I was trying to do.

 

I originally set both .a and .b to absolute which was also not working making me think I was going about it the wrong way. I now feel like I understand positioning better. Admittedly I have been avoiding it as much as possible since I have been able to do almost everything I need to with flexbox.

 

Cheers!