Join the Webstudio community

Updated last year

animate radix menu

At a glance

A community member has added animation to the Radix dialog content component on their website. They have provided the CSS code to achieve this, including animations for the dialog overlay and content. The community member has shared this information and a link to the website, encouraging others to try it out and customize the animations.

In the comments, another community member notes that the dialog overlay can be animated separately, and they plan to create a shared template with variations that the community can use. Another community member asks if they can use the Webstudio logo in their shared assets.

Useful resources
i've added animation to raddix dialog content component. you can view the page here: https://reactivate-marketing-site-01k72.wstd.io/
be sure to go to mobile breakpoint for hamburger icon to appear, once you click i have animated the dialog content component menu to slide in / out and you can toy around with your own animations. This is how I managed to do it:

Project Settings > Custom Code:

<style>
@keyframes fadeInOverlay {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeOutOverlay {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes slideInContent {
from {
transform: translateX(-100%); /* Start off-screen to the left / } to { transform: translateX(0); / Slide in from the left / }}@keyframes slideOutContent { from { transform: translateX(0); / Start on-screen / } to { transform: translateX(-100%); / Slide out to the right */
}
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogOverlay"][data-state="closed"] {
animation:slideOutContent 300ms ease-in;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="open"] {
animation: slideInContent 300ms ease-out;
}

[data-ws-component="@webstudio-is/sdk-components-react-radix:DialogContent"][data-state="closed"] {
animation: slideOutContent 300ms ease-in;
}


</style>
Attachment
image.png
A
D
4 comments
this is awesome, thanks for sharing, definitely saving this one
it's worth noting that you can animate the dialog overlay separately. I initially had both elements fading in and out. There are a few different ways the community can apply their own animations. When I get done with this landing page, I'll work on a few variations that the community can copy and paste.
I've added this to my project manager to create a community shared template for this that doesn't include my startups branding on it. Is it okay if I use the webstudio logo for any of my community shared assets?
Add a reply
Sign up and join the conversation on Discord