Here's a tip: any time you've got before/after screen grabs, don't do this thing where you've got to drag a line to switch between the two, don't have a fade, don't have a sliding transition, or anything like that. Just have it display one, then have a single button that you click to have it immediately display the other. Then when you click the button again, it goes back to displaying the first one again. Click, click, click - and your eyes do all the work for you.
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)
Hey Tom, I'm the creator. They're actually even worse than what you're describing. On touchscreens, the handle slides up and down as you try to move it left or right. Horrible, isn't it? One of these days, I'll get around to fixing it. The only reason it hasn't been done yet is that, to be perfectly honest, you're the first one to give this feedback. So I appreciate it!
If you got rid of the slider entirely and just had it flick between the two images instantly, the entire handle business would become irrelevant, and you'd never need to think about it again!
I admit I don't do web stuff, so perhaps this is hard to do. But I think it's the ideal. Before/after comparisons are very easy to assess if you can flick between the two cases and let your eyes show you the differences. The value of having an image that's part one and part the other (and two completely separate parts!) seems a bit questionable.
(My line of work means I'm unlikely to end up a customer, so you don't have to pay attention to my opinions.)
The flipping-between is a great hack -- as you said your eyes (really, brain) just do the work for you.
I learnt about it in Japan where proof-readers and editors would (or do) quickly lift a top page up and down to spot mistakes with kanji (pictographs). And sure enough, even from a page of dense script the dissonance of the error really does pop out at you.
I likewise tucked that little trick into my belt -- it comes in useful anytime you're trying to manually spot a pattern across complex data. This technique has the same "vibe" as FFTs to me: it's just neat feeling like you're getting computation from the universe for free.
Solar PV in a similar category: free electrons if you can arrange the magic rocks just right :)
If you put two proofs side by side, you can view from the right distance then uncross or cross your eyes like a stereogram till they converge, which makes differences shimmer.
And once you have the hang of this technique, congratulations! You can now enjoy those 3D "Magic Eye" images that stumped a significant portion of the population back in the 90s :)
I use ScreenFloat[0] in a similar way to catch differences between GUI settings, like the cPanel PHP extensions selector, which has tons of checkboxes. Position a screenshot of settings for site A over the settings for site B, adjust the transparency, and any differences will jump out.
I'd like to imagine I know which of each example were better designed, but the handle going to the side opposite from the label was making me second guess. Move handle away from the label to reveal is how I took it, so hope that's what you intended.
OTOH, I'm on touch screen (iPad/iOS26/WebKit) and it didn't go up and down, it went side to side.
As other feedback, the dumpster fire and deprecation warnings in the docs make me want to try this. I find builder-to-builder candor refreshingly helpful, treating your doc reader like an actual partner instead of like a euphemism. Appreciate your same candor throughout these comments.
Chainlift > Agency Services > Team menu option seems inert.
I always found this UI pattern a bit odd, because there just aren't that many situations where you want to compare the left side of image A and the right side of image B.
I see it a lot in photography, to show before/after processing - but what you want to be able to quickly compare are the same part of an image with and without the processing applied.
One of the photography tools I make is a LUT viewer/converter - and while I didn't have the slider at first, I guess it's standard enough at this point that people asked for it and I added it.
But I made two additions to it that make it more useful IMO:
- have labels on the left/right top corners, so it's immediately clear which version of the image you're looking at
- click and hold on the image to preview the full unprocessed version; release to revert to the view. That makes it easy to quickly compare the two versions of the same spot of a photo. (similar to what you suggest, but non-latching)
I've been wondering that myself. The descriptions seem to indicate that fully dragged to the left is liftkit, but my first assumption was that would be fully dragged to the right.
it's bad UX.
There's a little tiny arrow on the line's grab indicator showing which "side" you should look at. You can barely see it. Below there's the two labels floated to either side...
I agree, the x-axis labels are not helpful! Thankfully, the first example is “buttons with corrected icon spacing”, and the image on the right looks much better than the one on the left (a bigger difference in quality than in the other two examples), which is visible when the slider is on the left.
Suggestion to devs: put the label “material-style” in the lower left of its image and “liftkit” in the lower right of its image, and cover them appropriately as the slider moves, and then it'll be clear which framework the current image (or portion of it) belongs to.
If you were going to do this for the slider approach you can arrange the labels to the `block-start` and `block-end` of the image and support non-RTL scripts/languages natively.
(Not unrelated: answer from Andrei Herasimchuk at https://www.quora.com/Why-does-Adobe-Photoshop-differentiate...)
Also: I can't work out which image is which. Taking the first image as an example: we've got MATERIAL-STYLE on the left, and LIFTKIT on the right. But what's the left? Does this mean that when you drag the line to the right, revealing the left image, you're looking at MATERIAL-STYLE? Or does this mean you see MATERIAL-STYLE when you drag the line to the left?
(This might seem like pointless quibbling, but this thing bills itself as the The UI Framework for Perfectionists.)