Topic: Trying to animate two components on top of each other

aiivers free asked 4 years ago

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

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?

Jakub Chmura staff commented 4 years ago

Hi @aiivers,

To be honest, it's hard to understand what you want to achieve. Do you want to achieve something like a carousel ?

If yes you need to delete component 1 after animation or try to use flexbox.

Please give me more details about your expected behavior because I can't help you based on this information.

Best, Kuba

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.4
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No