Logo easter egg

[tandpfun]

trafficstars

Hovering the logo animates it! This was mainly done just for fun, not sure if it makes sense to keep it or not, and idk if it's implemented correctly.

[tandpfun]

Oh this broke some stuff on mobile lol

[tandpfun]

I actually imported the class prop (which fixes mobile), this probably isn't how I should be doing this but idk react lol

[NurMarvin]

Instead of using a GIF for this, it would probably be smarter to use a CSS animation. I'll try to recreate the GIF as a CSS animation and then send you the code in the comments.

[NurMarvin]

Alright, I gave it a try using CSS animations but it's not exactly like the GIF that you made. I tried to use Tailwind classes to the best of my ability at first, but those lacked the ability to add an animation delay hence I had to add some custom classes as well: https://play.tailwindcss.com/Q8kPioAIBx I also have the issue, that the animation instantly restarts so that'd be something someone with more CSS expertise could have a look at

[IanMitchell]

Seconding CSS animations if possible - that lets us disable them for people who ask for less motion, and the byte size of it is significantly reduced

[tandpfun]

Alright, I gave it a try using CSS animations but it's not exactly like the GIF that you made. I tried to use Tailwind classes to the best of my ability at first, but those lacked the ability to add an animation delay hence I had to add some custom classes as well: https://play.tailwindcss.com/Q8kPioAIBx I also have the issue, that the animation instantly restarts so that'd be something someone with more CSS expertise could have a look at

This is great! If this animation is only on hover, I think it makes sense to just make the iteration count 1. I don't know react & animations too well, so I'm not sure how to get this to only animate on hover. Would I just add and remove the new jump animation class?

Here's a version that only animates once, as well as with a decreased animation time to match the gif (idk if I prefer it being slower or the same speed as the gif though): https://play.tailwindcss.com/F6JLzKIA8x?file=config

[NurMarvin]

I'm not sure how to get this to only animate on hover. Would I just add and remove the new jump animation class?

Theoretically there's the group and group-hover classes, which would work by applying the group class to the parent, in this case the SVG element, and the group-hover with animate-jump (so group-hover:animate-jump to the respective children, in this case the paths for the letters. For more information on that, here's a link to the TailwindCSS documentation for that: https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover However after trying this in the Tailwind playground I couldn't seem to get it working, If anyone wants to try making it work this way, here's a link to the playground with my code: https://play.tailwindcss.com/HSjygT9Uyh The other (more dirty) way, would be using JavaScript which would involve adding event handlers to the logo component, to keep track of the hovering state and then using that to conditionally apply the classes that way. I however would consider this a "last resort" option, since I'm sure that there's a way to get it working purely in CSS.

[tandpfun]

I'm not sure how to get this to only animate on hover. Would I just add and remove the new jump animation class?

Theoretically there's the group and group-hover classes, which would work by applying the group class to the parent, in this case the SVG element, and the group-hover with animate-jump (so group-hover:animate-jump to the respective children, in this case the paths for the letters. For more information on that, here's a link to the TailwindCSS documentation for that: https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover However after trying this in the Tailwind playground I couldn't seem to get it working, If anyone wants to try making it work this way, here's a link to the playground with my code: https://play.tailwindcss.com/HSjygT9Uyh The other (more dirty) way, would be using JavaScript which would involve adding event handlers to the logo component, to keep track of the hovering state and then using that to conditionally apply the classes that way. I however would consider this a "last resort" option, since I'm sure that there's a way to get it working purely in CSS.

I completely forgot about hover lol.

According to this issue, it looks like jit (on tailwindplay) doesn't have support for extending group hover for animations? Anyway, I got it to work by removing the mode line, but for some reason the animation delay isn't applying now.

https://play.tailwindcss.com/AQWS6bZyhT