techstartucalgary / tsu-website

The official repository for Tech Start UCalgary's website (indev)
https://techstartucalgary.com
MIT License
7 stars 7 forks source link

Fix lagginess of hero particles #224

Open Jhappy77 opened 2 years ago

Jhappy77 commented 2 years ago

The hero particles are cool, but they have a few issues:

  1. When a user scrolls down the page and returns up, they seem to accumulate in the corners and then burst outwards laggily
  2. Can sometimes slow down website performance

There are a few ways we could solve this.

Option A is to stop the particles from bouncing off the boundaries and reduce the number somewhat. This is configurable from the options. We could also change them to flow in a certain direction instead of bouncing everywhere. A thorough investigation would be necessary to ensure this options do not cause issues themselves (and still look good).

Option B is to switch to different kinds of particles. We could make little bits flow across the screen like stars using the same library. I have some example code that I can share with anyone who is interested in investigating.

Option C is to use React Visibility Sensor. We are using it already for the countups. We could use it to turn the particles on or off depending on if they are on-screen. I bet with some css, we could even make the particles fade in or out.

Jhappy77 commented 2 years ago

Option C is my favorite idea rn. If we combined it with a slight reduction in the # of particles, we should be golden