DJDMorrison

Pride Fun

Confetti and Rainbows

Live Demo
SCSSJavascript

Fri Jun 04 2021

I needed to make a platform at work a bit more exciting for Pride Month. This involved a couple of standout features; an SCSS-generated sharp-step rainbow gradient and a button that sprays hearts and rainbow confetti everywhere.

At work, I am responsible for the user-facing part of a live-streaming platform that is viewed by thousands of employees at a time. This platform features custom-branding for events and social aspects. During Pride Month we wanted to get in the spirit, make the platform a bit more exciting and give users something to smile about.

Emoji Confetti

Demo and code: https://codepen.io/djdmorrison/pen/QWprogG

The platform features social aspects, including a like button for messages/questions. This is usually just a boring thumbs-up button and nothing else. For Pride we made emojis and rainbows explode from the button whenever it was clicked.

I first went to GreenSock as a pretty standard animation library for javascript and found what seemed like a great 2D Physics engine. I quickly created what I needed before realizing that it was a paid plugin.

No problem! I'll create it myself!

This ended up being a fun exercise in velocity, gravity and optimizations. The basic idea behind the physics of throwing an emoji around is below:

Velocity and Gravity

emoji.vy -= gravity;

emoji.x += emoji.vx;
emoji.y -= emoji.vy;

const transform = `translate(${emoji.x}px, ${emoji.y}px)`;

emoji.el.style.transform = transform;

I created an Emoji class which stored it's x and y velocity, including it's x and y positions. Each time it was updated it would reduce the y velocity by gravity, update the emoji's position and then set it's position on the screen using the translate transform.

Optimizations

On my first code run through I updated each emoji using a separate setInterval. This was okay for a small amount of emojis, however, it quickly broke down if the user spammed the button a few times quickly.

The obvious fix was to have a single setInterval that updates every (1000/60) milliseconds to create a 60 FPS experience for the user.

SCSS Generated Sharp-Step Gradient

Demo and code: https://codepen.io/djdmorrison/pen/OJpvqOR

This one is slightly less exciting but I'm sure it'll be useful for someone someday. I needed a rainbow gradient with a sharp edge between each band of colours - usually, the linear-gradient will blur the edges between each colour, which I guess is more representative of an actual rainbow but we wanted sharp edges!

I worked out the maths of dividing the width of the container by how many colours were needed and where each colour should stop/start. But suddenly the requirements changed and everything needed to be redone. So, I thought why not just create a function to do this for me and so I spent a couple of hours diving into the world of SCSS functions and variables - despite the actual maths only take a couple of minutes, but would it be automation if it didn't take longer to work out how to automate the task!

The final SCSS function looked like this:

$colors: $red, $orange, $yellow, $green, $blue, $purple;
$steps: 15;

$gradient: null;

// For each step, add the next colour in the pattern for (100 / $count)%
// Add a new linear-gradient with a transparent section for each colour to ensure sharp lines
@for $i from 1 through $steps {
  $gradient: append($gradient, linear-gradient(
    nth($colors, ($i % length($colors) + 1)) ((100 / $steps) * ($i - 1) * 1%),
    nth($colors, ($i % length($colors)) + 1) ((100 / $steps) * $i * 1%),
    transparent ((100 / $steps) * $i * 1%)
  ), comma)
}

Basically we step through each step of $steps, creating a linear-gradient for the next colour in the list of $colors. The inner linear-gradient is made up the colour and a transparent step. This transparent step is what creates the sharp line between each band.

The result $gradient is then set as the background of the element and you have a sharp-step gradient!

Feel free to use this function in your own work.

Wrapping Up

Overall, users loved the Pride updates and have requested more fun changes in the future! And it's lucky I made the gradient function as I've needed it again since!