How to add animation to dropdown and mobile menu

At a glance

The community member is looking for a way to add interaction and animation to the navigation menu, similar to the Webstudio website. They are using the "Radix" component from the "Component" panel for the navigation. In the comments, another community member provides some CSS code to create a scale-in and scale-out animation for the navigation menu. They also mention working on a lightweight animation library to make it easier to animate Radix and other components. Another community member notes a bug with the menu where the content doesn't load right away, and suggests moving the overflow hidden from the menu content to the viewport container to fix the issue.

BBashar

Hi guys, does anyone know how to add interaction/animation in the Nav just like the Webstudio's own website? I'm using the "Radix" component from the "Component" panel for the Nav.

3 comments

JJohn Siciliano

Plain Text

#viewport-container [data-state='open'] {
  animation: scaleIn 200ms ease;
}
#viewport-container [data-state='closed'] {
  animation: scaleOut 200ms ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: rotateX(-30deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotateX(-10deg) scale(0.95);
  }
}

and then add viewport-container to the ID field on the viewport div.

I'm also working on a lightweight animation lib that makes sit easier to animate radix and regular components

JJohn Siciliano

sneak peak. been working on a bug with the menu where the content doesnt load right away. let me know if you face that at all, i didnt on the webstudio site but am on this other site so trying to narrow down the cause

JJohn Siciliano

ah found the issue. move overflow hidden from menu content to viewport container

Add a reply

Join the Webstudio community

How to add animation to dropdown and mobile menu