Streaming live at 10am (PST)

Rainbow Overlay Menu Effect

Hey everyone!

I’m hoping to recreate a rainbow overlay menu effect exactly like the one showcased on this site.

Example: https://www.awwwards.com/inspiration/rainbow-overlay-menu-effect-stonewall-forever

How might I create this effect within a sidebar navigation menu using Webflow?

Thank you!

Like this?

https://preview.webflow.com/preview/sbx?utm_medium=preview_link&utm_source=designer&utm_content=sbx&preview=3ec033cabc671d9aed325632b7d7daa3&pageId=5db0a4037db63d249c217904&mode=preview

I added divs in the nav menu to make a structure where there’s a flexbox column for the links, that is suppose to grow when the other column containing the colors shrinks. Then there’s an IX on the menu button that makes the rainbow column vary in width when it’s clicked once, then on the second click to shrink the column.

1 Like

Thank you so much @vincent! You’re so wonderful!

How would I create a sequenced animation where the navbar links appear in order from top to bottom one after the other, as they do on the site?

Also, do you mind if I clone this?

Not at all, I just made it clonable https://webflow.com/website/My-2019-Fall-Forum-Sandbox?s=sbx

Edit the IX I’ve done for the ranbow, it’s hooked on the open menu hamburger button. Add initial steps for each of the links with opacity zero, then add actions to make them appear one by one. If you’re not comfortable with those steps, make popcorn and go watch the videos about how to use Interactions 2.0 and learn how to add actions and limit their effects to the selected element (vs. to its class).