That’s because technically you need 6 different animations to tackle, not four, since there are 3 “states” : “resting” state, left panel open (with right side out of the screen), and right panel open (left side out of the screen).
The 6 animations are:
- Resting state to left panel
- Resting state to right panel
- Left panel opened to resting
- Right panel opened to resting
- Left panel opened to right panel (skipping resting state)
- Right panel opened to left panel (skipping resting state)
The last two are the ones you forgot to tackle.
Here is what I suggest:
- Keep the four animation you already have (two for each, open and close).
- Create inside each panel a Trigger div, on top of the titles. Make it Hidden at first. Let’s call them “resting-skip-left” and “resting-skip-right”.
- Let’s say you click on the left title: When the animation plays, (the one you already created), ADD to it “show resting-skip-right”. Now you have the left panel open, and a trigger div on top of the right title. So now, you can add the 5th animation to be triggered by this new div.
When you click on the title (you are actually now clicking the skip-resting div), you can play a new animation that collapses the left panel and opens up the right panel.
- Repeat same with the other side.
Let me know if I was clear, I hope this helps. Cheers!