Next.js Discord

Discord Forum

Animated logo? (Next.JS/Tailwind CSS)

Unanswered
Red-billed Tropicbird posted this in #help-forum
Open in Discord
Red-billed TropicbirdOP
https://studio.tailwindui.com/
Does anyone know how they made this kind of logo? (It's white and then fills up with black when you hover on it, and it seems connected to the Studio. text next to it.)
It's Next.js with Tailwind CSS. They also wrote Framer Motion, but I doubt thats the one doing it?

16 Replies

Red-billed TropicbirdOP
It sems like its either the:
<rect clip-path="url(#:ro:-clip)" class="h-8 transition-all duration-300 fill-neutral-950 w-0 group-hover/logo:w-8"></rect>

or 
<use href="#:ro:-path" class="stroke-neutral-950" fill="none" stroke-width="1.5"></use>

Most likely the first one rect clip-path
Don't know what rect and use is though:(
Oh wait <rect clip-path="url(#:rg:-clip)" class="h-8 transition-all duration-300 fill-neutral-950 w-0 group-hover/logo:w-8"></rect>
It is that one^
I wonder if I can somehow use the same thing in my own logo?
if I simply replace the svg code
@Red-billed Tropicbird if I simply replace the svg code
Dayo
what they did was add a fill color, then set the fill width to 0 and then on hover set it to the original width of the icon. it animates by default because of the transition-all property and the duration-300
here

https://play.tailwindcss.com/dTwxEufsNN
@Dayo here https://play.tailwindcss.com/dTwxEufsNN
Red-billed TropicbirdOP
Oh wow thanks a lot! thats cool
Do you think its possible to change the animation direction?
like going from right to left, or down to up?
Dayo
yeah def. it also depends on your icon. because the animation will follow the path set on the svg
@Dayo yeah def. it also depends on your icon. because the animation will follow the path set on the svg
Red-billed TropicbirdOP
Oh, so the direction of the animation is dependent on the path set inside the SVG code itself
Dayo
yeahh
but can be manipulated with css.
but by default, just adding a regular transition, it will animate along the path
@Dayo yeahh
Red-billed TropicbirdOP
https://play.tailwindcss.com/bvJl9hYzCy
I tried 🤣 I wanted a cool hollowed letter M as my logo, that get filled inside like their animation, but instead got something horrible haha