Drawing the theme

I went to this website and got the randomized theme Glitzy holographic surreal scroll-driven animation

Moodboard

Idea

I had a brainstorm session at work, and I decided to use holographic christmas ornaments instead of diamonds/glittery confetti. I want them to be shooting out if the bottom of the viewport like a party popper, and then have them fall back down.

Building

As I have never built anything like this before, I reviewed various codepens, and found one with an effect I'd like to reacreate. Since the codepen used jQuery and SCSS I couldnt just copy paste it, but that made it the more the exciting for me.

Version 1

Wednesday 11/12 when I was at school I showed my version 1 to our co-teacher Dorien, and it was clear it had a few bugs that needed to be fixed:

• There was a weird blur being applied that didn't make sense
• The ornaments appeared in the middle of the screen and flew down, they were supposed to come up before they flew down.
• The animation upon scrolling didnt look at the viewport, but at the whole body or main, so the animation stretched out a lot and if you were on top of the page you saw something different then if you were at the bottom.

Because of the severity of these bugs, I decided to start over completely.

Version 2

As I started over, I decided to ask a friend of mine for help, so I could finish this with clean code and an animation I was pleased with.

We started by mostly translating the jQuery, this is the part where I did the least. The code in the codepen was really messy in general, so I had a lot of cleaning up to do. But first, we finished the code.

Afterwards, I cleaned up the code by renaming the variables I had, choosing const or let for each variable insead of var and some general changes like wrapping the first for statement below.

These are things I reached in version 2:

The animation now happens in a responsive way (it was in a set pixel width, so not responsive to your device)

        const screen_w = window.innerWidth; // Screen width
        for (let i = 0; i < 20; i++) {
          const ornament = {
            el: createDiv("ornament"),
          };

The animation now starts from the bottom, shoots up, and then the ornaments fall down out of viewport.

      this.beginAnimation = function (callback) {
        ornament_center.style.display = "block";
        const screen_w = window.innerWidth;

        for (const i in _ornaments) {
          _ornaments[i]._y = -(screen_w / 2) + Math.random() * screen_w;
          _ornaments[i]._rotation = -10 * Math.random() * 20;

          _ornaments[i].el.style.display = "block";
          _ornaments[i].el.style.transition =
            "transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1)";

          _ornaments[i].el.style.transform =
            `translateY(${_ornaments[i]._y}px) rotateZ(${_ornaments[i]._rotation}deg)`;

          setTimeout(() => {
            _ornaments[i].el.style.transition =
              "transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1)";
            _ornaments[i].el.style.transform =
              `translateY(${window.innerHeight / 2 + 50}px) rotateZ(${_ornaments[i]._rotation}deg)`;
          }, 400 + i * 10);
        }

Result