Fix spinning logo in header. (Good idea? ¯\_(ツ)_/¯)

[josh-collinsworth]

I noticed this little spinny effect was broken so I reintroduced it in a new way. I don't now if it's a good idea or a good implementation of the idea, but it's kinda fun. ¯\_(ツ)_/¯

[mxdvl]

I love it, but I think that making it CSS only would be superior.

a[href="/"] {
  transform: rotate(0deg);
  transition: transform 360ms;
}
a[href="/"]:hover {
  transform: rotate(180deg);
}

[lucacasonato]

I agree - can we do it with CSS? :)

[josh-collinsworth]

I had a reason I wasn't doing it in CSS before; there was something janky about it. But let me see if it can be reworked.

[josh-collinsworth]

Ok, I'm remembering now: if you do it purely in CSS (whether via animation or transition), there's a bit of jank if the user's cursor leaves before the animation is finished.

But comparing the two, it seems like that's just a possibility either way, so this is probably the superior option.

[lucacasonato]

Love it

[mxdvl]

if you do it purely in CSS (whether via animation or transition), there's a bit of jank if the user's cursor leaves before the animation is finished.

Transition should free from such artefacts, provided that you do not conditionally apply the transition property on hover. I've updated the demo to illustrate the behaviour.

[josh-collinsworth]

if you do it purely in CSS (whether via animation or transition), there's a bit of jank if the user's cursor leaves before the animation is finished.

Transition should free from such artefacts, provided that you do not conditionally apply the transition property on hover. I've updated the demo to illustrate the behaviour.

The issue is: I think we want the logo to stay in its rotated position at the end.

@lucacasonato do you have any opinions on the better implementation?

a) Logo rotates 180 degrees and remains in rotated state until next hover, but could jerk if cursor leaves during animation;
b) Logo rotates 180 degrees on hover, and un-rotates when hover ends. No jerk, but always un-rotates.

[mxdvl]

if you do it purely in CSS (whether via animation or transition), there's a bit of jank if the user's cursor leaves before the animation is finished.

Transition should free from such artefacts, provided that you do not conditionally apply the transition property on hover. I've updated the demo to illustrate the behaviour.

The issue is: I think we want the logo to stay in its rotated position at the end.

I see! If my input is welcome, I think the best way to achieve this effect would be to have the desired rotation as a state that is incremented by 180° every time a cursor enters and animate the rotation: no jank, no rotation back, minimal JS state handling. Feel free to disregard this suggestion 😊.

Crafting little delights is hard, but oh so rewarding when you get there!

[josh-collinsworth]

Ok I'm back and @mxdvl I think you're right; a sprinkling of JS with signals creates the ideal effect here. @lucacasonato you agree?