Smoother animation for expand and collapse interactions on a large body of text?

Design help Animations & Interactions
1

I’ve been trying for a few days now to get a specific interaction to work smoothly.

When clicking any of the project blocks, the block should expand to reveal the large body of text (projectStory). Clicking again does the reverse.

The main issue I’m having is the context around this interaction: The project blocks, on desktop, are in a 2-block-wide grid. So when the interaction widens the selected block, it pushes it’s adjacent block off the row(left) or pushes itself to the next row (right). The large body of text should also grow smoothly, pushing rows below it down.

How can I keep this entire interaction and have it work smoothly?

Currently, I’m using a variable in the projectStory’s height, so that the auto height of its parent (projectBlock) handles all of the scaling and animation smoothly (all of its properties transition by 200ms).

Here is my read-only link

Edit: Currently the animation is limited to the block labeled “Chronos Design System”.

Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: Read-only link
[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link

2

To my knowledge, without scripting, this is kind of difficult.

I’ve opted for delaying the show/hide animation and placing animations before and after it to soften the intensity of the on/off behavior of show/hide.