February 02, 2021
I’ve been planning on having this feature for a long time now, even before I rewrote this whole app last December. It's finally here!!
You can play around with it by changing the emojis and the total count of items (CodePen automatically saves and reruns the code)! That's how I took screenshots as examples that I added at the lower part of this blog post. If it did not work the first time as expected, you can always click the CodePen button at the bottom right that says Rerun.
So on our birthdays, Twitter never fails to surprise us with birthday balloons 🎈. Such a simple idea and yet very impactful. (TODO: Screenshot that feature on my actual birthday and add the image here)
Messenger has something similar too when we use a sticker with a heart ❤️. Multiple hearts of differing sizes goes up our screen. We can even play with those using the touch! I don’t think that feature is still in the app though. It is now more subtle as compared to how it was.
The idea really came to me one time I was thinking about how companies change their entire branding on special occasions, specially on holidays. I wanted something like that on my website that is also somehow automated.
Let's call it the events feature and here's what I wanted for it:
When I had the idea, I attempted to try it out asap. After a day of little progress, I went back to my normal life and forgot all about it 👻. My thoughts weren’t as clear at the time.
Now that I think I had more than a year sitting on the idea, I finally decided to try again. Also, my birthday is just a few months away! The perfect date for this feature.
Ahh, the stars of this show ⭐️⭐️⭐️⭐️⭐️!
I have experience working on HTML5 Canvas and requestAnimationFrame from my previous company. I had created 2 canvases to visualize data which are also heavy with user interaction. Those were my 2 favorite projects! This (emoji party) can all be just because I wanted to work on something like this again 🤷🏻♀️.
Now what I need this time is simpler. It’s literally just emojis flying on the screen. What it was in a nutshell was:
Why requestAnimationFrame? I could also just iterate the functions with the default loop to paint it. But with that approach, the browser will either hang from the infinite loop or will use heavy CPU usage making it hard to use the application. Using requestAnimationFrame is the perfect solution for a smooth + light animation.
It was all trial and error. It looked so bad before it got to look decent. It was so bad in the beginning that my boyfriend and I were laughing at it. Really, I only wish I took videos during that process so that you can laugh at it too 🙊. I even had doubts then if I could actually make it work
In the end it was all about getting the numbers right. Did I already tell you Math was my only favorite subject in school? Maybe this is why I really enjoy working with canvas. It is all about advance animation and yet it works with so many numbers 😍.
One major plus points for me is how the the mood changes based on the emojis selected! Can't wait to really lay out the events and be creative with displaying the emoji party ✨.
Come back for my birthday (March 6) to see flying emojis again and let me know what you think!