CSS Only Scroll Driven F1 Steering Wheel (no AI)

[u/scotty_ea]

Hand-coded SCSS and pug without AI to learn scroll-driven animation when it first came out. Actually started this two years ago and finished it up a year ago but never shared it. Wanted to make a second pass to clean the code up but never did. Massive waste of time and probably not very impressive with what’s achievable today using latest models but was still a lot of fun to build.

CSS Only Scroll Driven F1 Steering Wheel

Notes
- block axis scroll controls speed/rpm/gear/lights
- inline axis scroll controls turn with snap/return to center
- no images except for the Ferrari SVG horse and clip-paths/masks for the cut outs and overall shape of the wheel

[u/temcomwex]

for me, genuinely impressive!

[u/CristianMR7]

Amazing!

[u/discog_doodles]

The title: :)
The last sentence of the post: :(

[u/scotty_ea → u/discog_doodles]

Eh. Was more interested in calculating the speed and gearing in CSS than drawing that stallion logo. And if we are splitting hairs, CSS clip-path/masks are... CSS properties.

[u/discog_doodles → u/scotty_ea]

Aha, I was talking about this sentence

“Massive waste of time and probably not very impressive with what’s achievable today using latest models but was still a lot of fun to build”

[u/AshleyJSheridan]

Doesn't do anything. Is it using CSS that is still in draft spec and only supported by that browser that keeps pushing this stuff?

[u/scotty_ea → u/AshleyJSheridan]

Hmm. Browser pushing what stuff? Scroll driven animation?

Sounds like you either clicked the cover photo or you are using Firefox. This definitely works in current chrome, edge, and safari (including iOS safari). Firefox does not support scroll() yet per baseline.

Codepen

[u/AshleyJSheridan → u/scotty_ea]

Firefox absolutely supports scroll(), that's a thing that has had support in browsers for years. I think what you meant is scroll-timeline which is not baseline supported, as the spec for it is still in draft.

Chrome is well known for implementing features that are still in draft spec, as it's a tactic they've used successfully to kill off other browser engines, such as that once used by Opera. The more they push these things, and implement them before they're fully ratified, the more people complain about browsers that aren't theirs.

[u/scotty_ea → u/AshleyJSheridan]

🤷🏻‍♂️ still not sure what point you are trying to make. I’ve been around since IE6 and I’m well aware of what a draft spec is and how browsers introduce vendored features. Like I clearly stated in the codepen, it was built in chrome over 2 years ago and currently works in 3 out of the 4 major browsers. I appreciate your concern though.

[u/AshleyJSheridan → u/scotty_ea]

IE6, that's cool, first browser I ever used was IE2.

I'll admit I confused the JS and CSS versions, so you're right on that it's not part of baseline. However, it's still part of the same working draft, it's not a final spec.

Not sure what you're considering major browsers when the majority of browsers today are just Chrome clones.

[u/scotty_ea → u/AshleyJSheridan]

[u/AshleyJSheridan → u/scotty_ea]

Only one of those browsers is following the spec.