DDA - 3D Scroll Animation

November 2024

Creative Spike focused on using your creativitiy to create a scroll driven animation.

At FDND, we had a special sprint where we got to let our creativity run free and build fun stuff, letting go of the styleguide of our client. Each week, we got a new random prompt focused on a new-ish technology.

This week we focused on scroll driven animations. My prompt was Sad Acid Graphics Scroll Driven Animations.

I had already done CSS scroll driven animations plenty of times, so I decided to do something different. I began by researching the vibe of the prompt, by looking at images that represented this style. I found inspiration in wireframe shapes, grids, and black-and-white colors with bold, bright accents.

After sketching a rough concept, I dove right into building. I chose Three.js to create a rotating wireframe donut. I had dabbled in Three.js earlier in the year, so I could reuse much of that knowledge. Once the shape was in place, I fine-tuned the animation. My first attempt was too fast and not smooth enough, so I added easing to give it a more fluid feel.

I spent a lot of time tweaking the animation, experimenting with different speeds and effects, and even more time searching for the perfect font. After many hours of refining, I settled on a bold font and finalized the design.

The result was a scroll-driven animation with a rotating 3D object that embodied the gritty, acid-inspired aesthetic of the prompt. The challenge of optimizing performance, especially with Three.js, was rewarding, and it was a great opportunity to experiment with something outside of my usual design scope.

I still love this project. It was a fun break from routine, a chance to push my skills, and a reminder of how endless the possibilities are with coding! It also inspired me to add something like this to my own website - hence the three.js shape on the home page.