https://rsc-inzing.com/team/

[fabiandraxl]

Hej @arminunruh

I added colapsable rows, but I cant figure out why the open animation is not displayed.

Could you please help me out?

Thanks, Fabi

https://rsc-inzing.com/team/

[arminunruh]

can u try a different easing function or a much higher animation duration?
i think it just looks like the opening is not animated. but actually it is. i think the easing just makes it super fast at the beginning so it looks like its not animated.

[fabiandraxl]

Hej @arminunruh

I already tried to experiment with these values and a different easing ... and an increased duration has led to the fact that nothing happens for a longer time and the element expands quickly at the end. 

For example, I made an easing with a duration of 1500 ms on the link of the „Kampfmannschaft" and 400 ms on the Version with "Vorstand" ... 

To be on the safe side, I have also deactivated the custom code ... but it didn't make any difference ... 

Any other Idea?

[arminunruh]

use

"ease-in"

for the easing function (without) ""

does that help?

[fabiandraxl]

Hey @arminunruh

I have activated the following Easing with 640ms on both text links: cubic-bezier(0.79,0.14,0.15,0.86); this seems to be displayed properly.

For comparison, you can try the red plus on the right side, here the standard easing option is still applied ... and here the animation still jumps when opening, the one for closing is displayed correctly ...

So what could cause the problem?

[arminunruh]

hey so i tried a different method of coding the expand functionality but it resulted in the same behaviour

it just seems animating the height of the row is really not performant enough!
it seems to work well with a few texts in the hidden row like on this page

https://benedettafilms.com/

but it seems that it gets janky when there are many images in the hidden row :/

[fabiandraxl]

@arminunruh

Hey Armin,

I used a textbox instead of the element-grid for the second row, but this causes the same problem as above with the images, i.e. the hidden row is expanded immediately when you click on one of the two "+" on the right side of the page ... as I said for the text link, I chose the other animation which seems to work ... 

Best regards, Fabian

[arminunruh]

hey fabian

can you not use masonry for the element grids on that page.
use

then see if it works better

[fabiandraxl]

@arminunruh

Changed it to Top aligned, no difference.
Take a look for your self ... :P

It seams like the cubic bezier is somehow faulty ...

Best, Fabi

[arminunruh]

ok but it also doesnt work with ease-in

i think its just because there are so many image elements in the row that needs to be expanded and it seems the height calculation the browser needs to do is quite cpu expensive

damn