Streaming live at 10am (PST)

Splitscreen accordion interaction

Hello,

I’ve been trying to replicate this website (the horizontal accordion part): http://urbandivides.org/
It works if you click on the title twice so it opens and closes, but it doesn’t if you click on the other title before closing it… (don’t know if it’s really clear).

The only solutions I found are for FAQ accordions but it doesn’t seem to be the same horizontally

Here is my public share link: https://preview.webflow.com/preview/corentinbureau2?utm_medium=preview_link&utm_source=designer&utm_content=corentinbureau2&preview=e5478386757fc4e9b528e8d9dec305e3&mode=preview

Thanks for your help in advance,
Corentin

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:

  1. Resting state to left panel
  2. Resting state to right panel
  3. Left panel opened to resting
  4. Right panel opened to resting
  5. Left panel opened to right panel (skipping resting state)
  6. Right panel opened to left panel (skipping resting state)

The last two are the ones you forgot to tackle.

Here is what I suggest:

  1. Keep the four animation you already have (two for each, open and close).
  2. 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”.
  3. 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.
  4. Repeat same with the other side.

Let me know if I was clear, I hope this helps. Cheers!

Hi @Mr_Finn,

Thanks so much for the help, in the end it wasn’t the good solution I think as the “second click” would mess up everything! But it sent me in the good direction! I managed to do it with only 4 interactions, deleting all the second clicks. I just have 2 main clicks on the titles that open the panel to 100VW and then have a hidden div to reset to 50/50 for each title.

Thanks for the tips, hidden div was the key!

If you want to look:
https://preview.webflow.com/preview/corentinbureau2?utm_medium=preview_link&utm_source=designer&utm_content=corentinbureau2&preview=5f505714f525381e1362a8b8ed964642&mode=preview

Thanks again,
Corentin

1 Like

Oh right right, even better! Didn’t think of having both hidden triggers show up at the same time haha. But glad it helped ^^