Click-to-expand animation

Hi guys

I want to improve a content I already built. (menue: “dienste”)
There are two columns, which when clicked expand to 100% and the other column goes to width 0%.
Then additional content appears on the bottom of the column.
On the arrow back the whole process is reversed back to its original state.

After a try and error phase, I finally made it somehow, working with flexbox and transitions/animations.

My question: Is there maybe an easier way to do this because:

  1. I had to duplicate the whole animation for left and right side
  2. Still the bottom content appears directly because of show/hide content
  3. Making it generally a bit smoother

Thanks in advance
Armin


https://preview.webflow.com/preview/sl-new?preview=e19901d329f346a74e6aadc5ba06482f

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.