<div>
      <MDBAnimation type="slideOutLeft">
          <Component1 />
      </MDBAnimation>
      <MDBAnimation type="slideInRight">
        <Component2 />
      </MDBAnimation>
    </div>

I want the above code to have component 2 take the position of component 1 after the animation (e.g. component1 is in the center of the screen, slides off screen to the left then is replaced by component2 in the center)

What I get with this code is component 1 in the center of the screen, then component two coming in below it's position. I've tried using absolute positioning and z-indexing however this messes with the animation.

Is there a simple way to make this work?