Animate favicon

[kai-oswald]

Fixes #31

Changes

• Animated favicon

Screenshot/GIF

It looks a little bit laggy, although the canvas is running smoothly when visible.
I also don't know a lot about react, so I just added it to the index.html. Let me know if you want it changed.

Checks

• Passes linting
• Consistent look across browsers

[jh3y]

Hey @kai-oswald 👋

This is great! Thanks for contributing 👍
That's fine. We can come up with a good solution first and then drop it into the react app using useEffect when the app loads 💪

I hadn't even considered canvas so this is another option worth exploring 👍 My initial idea was that we can create a GIF of the current whirl used for the favicon. I believe it's basic. Then once there's a GIF, there are online tools that can split that into image frames. Then I was going to use requestAnimationFrame to update the favicon href attribute on the available animation frame with the next frame in the set.

I see the current canvas solution is doing something kinda similar. However, the dimensions are slightly off and the favicon appears smaller than it currently does.

My last question 😅 How's the browser support? Is it working in the main browsers?

[kai-oswald]

Browser support seems okay-ish.

Just fixed the dimensions btw, didn't even notice it was off 😅

[jh3y]

Fixed dimensions 👍

But we are no longer spinning 😭 I think this is due to how requestAnimationFrame has been used.

I'll leave a comment on the code 👍 And we will get this in today 💪

[kai-oswald]

Did you clear your cache? 👀

[jh3y]

To fix up the requestAnimationFrame usage, we need to first remove the setInterval call as it won't be necessary 👍

Then we create a function that does the drawing/setting the favicon, let's say setFavicon.

We call it first with requestAnimationFrame(setFavicon) and then inside setFavicon after all the logic is handled, we call requestAnimationFrame(setFavicon) again 👍

[jh3y]

We don't need setInterval if we are going to try and use requestAnimationFrame 👍

[jh3y]

We should be able to reduce this to 1 potentially and it will look smooth 👍

[jh3y]

Does this still work if we create the canvas off-render? As in not in the DOM?

Could we instead create a canvas with document.createElement('canvas') and never append it to the DOM?

[jh3y]

Yep 👍 I see it working again now 😅

The changes for requestAnimationFrame would still be needed though as we don't get the benefit of requestAnimationFrame this way. I think reducing the degrees may make it look smoother 🤞

[kai-oswald]

Hmm.. I applied your requested changes, but the favicon still doesn't look smooth compared to the visible canvas.

I think the issue is that either canvas.toDataURL("image/png") is an expensive operation or the browser limits the update rate of the favicon.

Here's another demo of this technique having the same issues

[jh3y]

Hey @kai-oswald 👋

Yeah, I see the stutter too 😭 Could be an expensive operation. However, I have seen another approach that also had a kinda stuttery result.

This article details a different method of animating the favicon.

I'm wondering if the processing overhead is worth having in place if the favicon animation isn't smooth. It can't be seen in Safari also 😅

What do you think?

That being said, the animation seems relatively smooth for Defender of the favicon

[kai-oswald]

Favicon doesn't seem to be working on the public Edge too (Edge dev-channel works since it's Chromium). We'd have to manually handle these cases so we can preserve the un-animated favicon.

I also tested it in Firefox and the animation runs a lot smoother there than in Chrome, therefore I think it's a browser related issue and not an expensive operation.

This feature would've been nice if it'd run smoothly, but now we know that browsers have issues with it 😅