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 style of our client. Each week, we received a random prompt focused on a new-ish technology.

The Challenge

This week’s focus was on scroll-driven animations. My specific prompt was Sad Acid Graphics Scroll Driven Animations..

Since I had already done quite a few CSS-based scroll animations before, I challenged myself to take it up a notch and try something new!

My Solution

I started by researching the meaning of the words in the prompt. I looked up visuals that matched the aesthetic; wireframe shapes, grids, and black-and-white palettes with bold neon accents.

After sketching out a rough concept, I jumped into development. I wanted to use Three.js to create a rotating wireframe donut. I had experimented with Three.js earlier in the year, so I could build on that foundation, tweak it and play around with it.

Once I had the shape working, I focused on the animation. My first version felt clunky, it was too fast and not smooth. It stopped abruptly when you stopped scrolling. So I added easing and tweaked the speed until it felt more fluid and responsive. I also experimented with performance, effects, and of course I spent way too long picking a font.

The Result

At the end of the week I had a wireframe grid donut, which smoothly rotates on scroll. Making adjustments to the rest of the page really made it fit the prompt very well.

Reflection

This project was very fun! I still think it’s pretty cool. It was a fun break from serious client work and a chance to just build something cool and fun. It showed how much fun it is to experiment with unfamiliar technology, and how much impact motion has.

This project even inspired me to add a similar Three.js shape to my personal website’s homepage (old version), proof that creative spikes can have long-term impact.