Join the Webstudio community

Updated 7 months ago

Radix accordion animation

At a glance

The community member is having trouble getting an accordion to have nice animation like on the site they are using. They found some CSS on the Radix site, but don't know how to add it to their accordion. Another community member provides a sample of how to add the animation, but the animation is a bit jerky. The community members discuss ways to fix the jerky animation, such as removing the default margin on the accordion content and adding an animation to it.

Useful resources

JJBozo

Hi, can you help me please. I would like accordion to have nice animation like on their site. When I import the accordion it is just open and close without any animation. I found the css on radix site but I don't know how to ad it to my accordion.

.AccordionContent[data-state='open'] {
animation: slideDown 300ms ease-out;
}
.AccordionContent[data-state='closed'] {
animation: slideUp 300ms ease-out;
}

Thank you

12 comments

JJeremy

Here's a sample of how you can add the animation https://css-test-components.wstd.io/ (this is a playground site I've set for myself, so it changes often).

I don't know why the animation is janky on my version, you can copy the instructions there and debug.

JJBozo

thank you very much Jeremy

JJeremy

You're welcome. Hope it helps.

JJBozo

Its a little jerky but I will play with the settings now that I know hot to achieve it.

OOleg Isonen

at some point we will have an official way to add such animations visually to those complex components, right now its a bit of a hack

MMilan Boisgard | Uncode School

@Jeremy quick question. You already using css var?

JJeremy

Yeah, it's not a nice way of doing this. I just built a sample for him.