Animating the URL bar with emojis



March 17, 2021

alt text

What's up guys? 😁✌️
Today we will check how we can do an animation on the url bar (yes, you read that right) by using emojis!

This is something I found a while ago on a blog post and didn't know it was possible to accomplish. Well, it is accomplishable and it's really easy as well 👌

So the first thing we need to do is to create a script and there we'll start by creating an array with the various emojis that we want to create the animation. For this example, I used the various moon emojis because they easily create a continuous animation effect.

const emojies = ['🌕', '🌖', '🌗', '🌘', '🌑', '🌒', '🌓', '🌔'] const animateUrl = () => { window.location.hash = emojies[Math.floor(( / 100) % emojies.length)] setTimeout(animateUrl, 50) } animateUrl()

Now we just need to create a function 'animateUrl' that will continuously call itself with a setTimeout. This function will change window.location.hash and set it with a different emoji in sequence.

And that's it! What do you think of this type of animation? Would you use it on a website? 🤓