Animated logo? (Next.JS/Tailwind CSS) | Next.js | Page 1

vivid flame Sep 23, 2023, 5:43 PM

#

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?

deep cipherBOT Sep 23, 2023, 5:43 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

vivid flame Sep 23, 2023, 5:54 PM

#

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

ivory jewel Sep 23, 2023, 6:38 PM

#

vivid flame if I simply replace the svg code

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

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

vivid flame Sep 23, 2023, 6:40 PM

#

ivory jewel here https://play.tailwindcss.com/dTwxEufsNN

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?

ivory jewel Sep 23, 2023, 6:42 PM

#

yeah def. it also depends on your icon. because the animation will follow the path set on the svg

vivid flame Sep 23, 2023, 6:43 PM

#

ivory jewel yeah def. it also depends on your icon. because the animation will follow the pa...

Oh, so the direction of the animation is dependent on the path set inside the SVG code itself

ivory jewel Sep 23, 2023, 6:44 PM

#

yeahh

#

but can be manipulated with css.

#

but by default, just adding a regular transition, it will animate along the path

#Animated logo? (Next.JS/Tailwind CSS)