BrianT Posted September 1, 2021 Share Posted September 1, 2021 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 Link to comment Share on other sites More sharing options...
PointC Posted September 1, 2021 Share Posted September 1, 2021 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; } 3 Link to comment Share on other sites More sharing options...
nico fonseca Posted September 1, 2021 Share Posted September 1, 2021 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. Link to comment Share on other sites More sharing options...
BrianT Posted September 1, 2021 Author Share Posted September 1, 2021 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. Link to comment Share on other sites More sharing options...
PointC Posted September 1, 2021 Share Posted September 1, 2021 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? 2 1 Link to comment Share on other sites More sharing options...
BrianT Posted September 1, 2021 Author Share Posted September 1, 2021 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now