My first two ideas to ‘innovate’ on this was; a car driving down the page, or a drag racing Christmas tree where the lights count down in ‘full tree’ style.
Very cool idea! Suggestion: add a trail of breadcrumbs that the figure tosses behind them and, when scrolling up, picks them back up again or kicks them off the screen.
Stickman Michael Jackson; complete with moon walk, anti grav lean, side glide, circle slide, and a toe lean at the end. Crotch grab optional (maybe on click?).
A rocket, flying saucer or bird seems obvious, for something which is going up and down. But as an improvement, it should also handle the direction of scrolling. At the moment, the buddy always looks into the same direction. Unless it's Michael Jackson doing a moonwalk (which you could add too), it's inconsistent.
Sorry, but I find this incredibly distracting and unpleasant to me. Yanks my focus every time I scroll. Any site using it is an instant back button for me.
Do you have reduced motion/animations enabled on your browser and/or system settings? If you don't, it sounds like it would help you a lot, if you do then OP just updated the site to hide the animation based on that setting.
Do you think it would be a good idea for this to be rolled out by: online banking, government service sites, medical clinic portals, ... on the premise that the user can just opt out with exotic user CSS settings?
It is just goof-off nonsense for someone's personal site, not a genuine good idea in UI/UX.
(It would actually be perfect for a 1990's site chock full of animated gifs, such as spinning skulls and flaming swords. Had we had the JS capabilities back then, it would have been all the rage.)
When Apple rolls out the next iPhone with walking figures for scroll bars, I will publicly retract my remarks and wipe the egg off my face.
(Your tone comes off as “rephrasing the original intent of the post as something slightly different in order to have something to whine about.” It’s just a bit of fun to brighten our morning, not a proposal to interfere with your online banking experience)
There is a setting "reduced motion" on many browsers and devices. It should disable Scroll Buddy if a user has this turned on. Hope that helps. Thank you to @jsheard for the suggestion
Agreed. Extension user installs on their browser? Great. Something sites implement and impose on everyone? Please, no, except for truly pointless sites that are just about silly things. It's like those sites that try to force smooth scrolling on you.
I just replied to call out how negative your initial comment was and was suprised to see the full edit, thank you for the change and even providing sample code.
Not sure what you mean by "not something you dictate to the server", browser preferences are client-side. When you say "all of those settings" there's really two major prefers- settings and you already covered one (prefers-color-scheme), writting an extra query to cover prefers-reduced-motion requires minimal effort and provides a lot of value to your site's accessibility.
Now some of us would like an override checkbox to enable your demo again!
I didn't even know I had prefers-reduced-motion turned on and I certainly didn't know it affected web pages via CSS!!!
Another 0/1 bit for fingerprinting. Doesn't appear in https://coveryourtracks.eff.org/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors
It seems the author has now implemented this. Now people like me just see a pointless page of lorem ipsum. I feel like demos can be exempted from filters like this, especially when you can only get to the demo via a clearly worded link.
The same code that disappeared the thing could add some text explaining that the page is disabled and why, in my case: Apple Menu > System Preferences > Accessibility > Display > Reduce motion (for other OS's see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...)
For me, this setting makes macOS snappier, by getting rid of the little animations in OS. If it weren't for this comment, I never would have known it affected websites. I've had the setting for years with no issues.
At a certain point, one must take responsibility for clicking "a scroll bar buddy that walks down the page when you scroll" and then being faced with exactly what it said.
I agree that preferring reduced motion and then visiting a site whose sole purpose is presenting motion is an interesting choice, but I don't think the CSS Working Group or web developers in general are in any position to question it.
> Counter-argument against exempting the demo page
I really don't think that's a counter-argument for exempting the demo. It's an argument against ever implementing this feature on an actual website. Or, an argument for using the prefers-reduced-motion check on an actual website.
Thank you! I just went and adjusted a bunch of these, "reduced transparency" really reduced the visual load, I didn't realize how many windows were bleeding through for no reason.
If you're like me and want to keep the OS setting intact but not have it affect web sites, add the following preference in Firefox: ui.prefersReducedMotion (0 = no, 1 = yes).
I guess this is probably the kind of exact reason that I have "reduce motion" set, but it's a shame in this case since it's a pretty harmless implementation!
Time for the author to add a CSS VISIBILITY note for those with this preference alerting them to a non working page because their browser has this selected option
Would be neat if the author added some text to the demo page when prefers-reduced-motion is in effect, similar to <noscript> tags alerting you to the fact that JavaScript is disabled.
Thank you for your question, it was thought provoking.
Many things brought me here. One of them is that I’m a UX designer, and I like to stay in the loop with my dev friends—not just to build better products together but also to have interesting conversations.
I also have a lot of respect for development because I deeply value that knowledge. In a way, this aligns with a philosophical idea: understanding and respecting different fields of knowledge helps us grow and build better things together. As Montaigne suggested in his Essays, true wisdom comes from embracing our limitations and staying open to learning. I find it exciting to discover new things, knowing that there will always be more to explore.
Surprised I seem to be the only one willing to ask; _why in the world would you wall the implementation behind a Google Form?_
Edit: Implementation details are actually readily accessible in the DOM. Here's a gist that extracts the relevant details (for those who, understandably, don't want to give out their email in exchange):
As it currently stands, code without an explicit license isn't usable. There is no license for the code you posted, but contacting him could get you one. Using the code linked could constitute a copyright violation.
It's baffling to me. It's one thing if you don't want to do a write up and share it but to offer that in exchange to collect email adresses seems so strange.
Really cool thank for sharing! I tweaked the code a bit so that I could get Mario sliding down the flag pole for my gaming website. https://www.gamedrop.gg/
Please change the direction of walking when scrolling up. Right now the stick figure is walking backwards. It could be reversed or perhaps made to seem like backtracking (add a little more “caution”, “fear”, etc.).
207 comments
[ 4.8 ms ] story [ 246 ms ] threadThis is the first prototype i made.
Going to make a skateboarder, rock climber, or squirrel next. what other kinds of scroll buddies should I make?
An apple falling on to Newton's head.
Fun to think about!
Someone rowing the scrollbar thumb (the longer the thumb, the more rowers).
also cave explorer on a rope.
Cat, with different animations depending on how fast you scroll.
Elevator, with stops at paragraphs(/some other break)
How about a skier with little jumps or obstacles at each header
Scrollbuddy is different. I would take a bullet for scrollbuddy. I want him on all sites.
It is just goof-off nonsense for someone's personal site, not a genuine good idea in UI/UX.
(It would actually be perfect for a 1990's site chock full of animated gifs, such as spinning skulls and flaming swords. Had we had the JS capabilities back then, it would have been all the rage.)
When Apple rolls out the next iPhone with walking figures for scroll bars, I will publicly retract my remarks and wipe the egg off my face.
Um... why are you asking this? Feels like an odd tangent. The OP never suggested this was a good idea anybody should use.
(Your tone comes off as “rephrasing the original intent of the post as something slightly different in order to have something to whine about.” It’s just a bit of fun to brighten our morning, not a proposal to interfere with your online banking experience)
Just don't go to that site if you don't like it.
Useful, that is, in terms of getting a proprioceptive "feel" for the anatomy/topography of a document.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
It just needs one extra CSS rule to make the guy invisible when appropriate:
I didn't even know I had prefers-reduced-motion turned on and I certainly didn't know it affected web pages via CSS!!!
Another 0/1 bit for fingerprinting. Doesn't appear in https://coveryourtracks.eff.org/ (panopticlick). Also see prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors
Please revert the "fix" that makes it so your demo is not seen at all.
The same code that disappeared the thing could add some text explaining that the page is disabled and why, in my case: Apple Menu > System Preferences > Accessibility > Display > Reduce motion (for other OS's see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...)
For me, this setting makes macOS snappier, by getting rid of the little animations in OS. If it weren't for this comment, I never would have known it affected websites. I've had the setting for years with no issues.
Counter-argument against exempting the demo page: https://news.ycombinator.com/item?id=43237672
I really don't think that's a counter-argument for exempting the demo. It's an argument against ever implementing this feature on an actual website. Or, an argument for using the prefers-reduced-motion check on an actual website.
Some of them are incredibly hilarious, but the author is just way too productive.
For me, it just replaces the slow movement animations with slow fade animations instead, which is just utterly infuriating.
Also it was invisible with Dark Reader.
If I were a developer, I would make a version where, when the stick figure moves backward as you scroll up, it does the moonwalk.
Many things brought me here. One of them is that I’m a UX designer, and I like to stay in the loop with my dev friends—not just to build better products together but also to have interesting conversations.
I also have a lot of respect for development because I deeply value that knowledge. In a way, this aligns with a philosophical idea: understanding and respecting different fields of knowledge helps us grow and build better things together. As Montaigne suggested in his Essays, true wisdom comes from embracing our limitations and staying open to learning. I find it exciting to discover new things, knowing that there will always be more to explore.
Edit: Implementation details are actually readily accessible in the DOM. Here's a gist that extracts the relevant details (for those who, understandably, don't want to give out their email in exchange):
https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...
Edit here you go: https://gist.github.com/sergiotapia/961e40b3282260ca636240f2...
Give this to your AI and it'll be able to add it to your site pretty easily!
- Chrome on Windows 11
- Firefox on Windows 11
- Chrome on Android
- Firefox on Android
Also no JS errors on console.
Maybe I'm doing something wrong?
I tried in both Ultrawide and traditional FullHD screens.
I had Animation Effects off on Windows.
https://i.imgur.com/vqBmNUn.png