▲ 271 points
back
49 comments
Very nice, but I don't think this improves UX at all. How does having an animation for something help the user understand what's going on? They know something is scrolling because they see the data changing -- a flip / slide / other animation is not necessary.
In fact I think it interferes with UX because it's harder to quickly read the list -- you need to wait for the animation before reading the text. The only exception to this is Skew (because the item text is always visible), but even that is harder to read than just a normal list without the animation.
Very impressive demonstration of CSS3, but just because you can doesn't mean you should.
Cool, almost as good as <blink>. And by that I mean, interesting stuff on a playground, but please don't use it in a real UX.
I've worked as a designer in the [pop] music industry. As much as you don't want this list view when you're picking hotel dates, I can assure you that experimental stuff like this has it's place. Please don't respond with blanket statements ruling out it's use. Good designers are quite capable of deciding when and when-not to use this kind of stuff.
Good designers sure are. I was more worried about the bad designers ;)
Bad designers don't need help from experimental css to create bad experiences :)
Not sure of this is a good our bad thing, but those look a lot similar to WP7 transitions. Specially the curl one.
The effect is awesome, but on a real website it's most probably excessive design.
These should probably never be used in an actual list on a real website. Its impossible to skim them (at a stretch, maybe with *skew") and makes them incredibly hard to use.
I've been working on a UI control with some similarities to these, but built specifically for skimming long lists. The general idea is that the faster you scroll, the more "zoomed out" the view becomes. As the scrolling speed slows, the zoom returns to normal. So if you're scrolling quickly through a very long list, it's like flying at a higher altitude. The list includes big "landmarks" (e.g. letters of the alphabet) to provide a sense of position. The control is tuned so that the apparent velocity of a given item through the control's "viewport" remains within the same narrow range. Instead of getting an illegible blur of items zooming past, you instead see an increasingly zoomed out view as scrolling speed increases. In an environment that provides momentum scrolling, the overall effect is like taking big, high leaps along the list in low gravity.
Any public link or none yet?
Nothing yet; it still has some pretty ugly parts. As soon as it's ready, though.
Yeah, I think a more subtle version of the Skew effect, with a smaller angle and quicker transition, could be tastefully used.
Cool effect.
But I will come to your door with an axe if you dare use it on an actual website.
I'm not sure about using them for list scrolling, but they are definitely interesting effects that would be great to show new elements getting added to a list (e.g. of notifications for example).
Yeah, there sure is a place for fx like these - but it's applied in the wrong place here. Scrolling lists are a nightmare to read even without such effects. A place where I could imagine myself using it is as an intro/outro effect, drawing a user's attention to a list.
If your list has more than a dozen items or so, then you need a better way to represent your data (EDIT: just to be clear, not in a data structure way— rather in a graphical representation way. See Tufte's "Envisioning Information" (and Tufte's work in general)).
That being said, the effects are really sweet. Zipper and Fan are my favorites.
Big lists can be useful as reference tables, though in that case I'm not sure I would bother with fancy scrolling. For example, while you can make better visualizations of per-country GDP for various purposes, just the plain sortable table imo is the most useful basic reference format.
It seems to work pretty well for my music library (where I have lists with artists and albums).
That said, I appreciate being able to instantly go to all artists or albums that start with a certain letter, either by pressing a key on the keyboard or by taping on the index on iOS devices.
I’m not sure how things like that can be improved to not make them a list. Search is always a possible alternative, but to me search is a fundamentally different way of looking at my music. If I search I already know what I want, if I scroll through the list I don’t and I’m looking for something.
Despite the silly negative comments here, there could be some REAL UX advantages to using animations in this way.
Loading large databases of information is very taxing on mobile devices. Users really don't like being interrupted when scrolling, but sometimes they have to be. Animations like this might make the server queue time a little less painful and more gracefully notify users when its ready.
Immediate example that comes to mind is the iOS app for Netflix.
Here's a sane implementation for addressing server queue time - preload the next N results. Problem solved, no need to go back the the 90's with useless moving visual elements and sanity is preserved.
Your snip answer lacks experience. You can't cache what you don't know a user will do next. And queuing next n results is very slow over cellular networks.
>You can't cache what you don't know a user will do next.
The user will probably keep scrolling if they are scrolling through a list of items.
If a more practical use such as for implementing faceted lists or haystack navigation of a large quantity of items, that could be a cool use. Outside of that, I keep thinking a lot of the effect demos (if used straight away) are fostering more of the "condescending ui" http://www.theverge.com/2011/12/9/2616204/the-condescending-... ... Has anyone talked about transition animations being able to be turned off and on? I'm thinking about Android developer options that let you do just that.
Great great work Hakim.
I will try and implement some as well.
Great art/advertising/motion graphics effect potential.
Love the organization of the stylesheet. Past/Future is a lovely way to organize your state keyframes.
Thanks so much!
Great job. I especially liked the fan and tilt effects, I can see them being used in a real world project. They visually notify the user that new content has been added to the bottom of the list without too much distraction
Unfortunately it doesn't work on my Samsung Tab 10.1. Scrolling is fine but animations don't play.
Surprised my iPhone 4 plays it, though some effects seriously lag. Here's looking at you Papercut and Skew.
Wow, I have never heard of this. What is triggering the transformations?
According to http://lab.hakim.se/scroll-effects/js/stroll.js it is the scroll event. I had worked on a Parallax project recently, and iOS Safari likes to queue DOM manipulation events until after a scroll even stops, but I'd be curious how this works on iOS. Anyone know of a method by which the same event type stuff could be simulated in CSS3?
Sure is frustrating that you can't get an update ('scroll') event from -webkit-overflow-scrolling: touch, so I left the scroll effects with regular overflow scroll.
It works well on my iPhone.
I don't think I would ever do business with a company that would deploy these FX, it makes everything hard to use and read.
Very nice effects. But, Out of all "SKEW" seems smooth to my eyes and then comes tilt and Papercut. How about you guys??
This could be very useful for populating load-on-scroll lists. I think Flip and Tilt are the least distracting.
I love all of these different CSS3 transform effects people are coming up with!
Nice, but all of these max out the CPU on all the browsers I've tried...
Same here..
Trying to replicate some these on iOS with core animation.
was about to say. too bad it doesnt work on ios/adnroid, but other than that -- i can see places here and there this could be useful so thank you!
Anyone know how this is working on iOS Mobile Safari?
Works well on my 4S, although sometimes it can get choppy.
This is awesome. Thanks for the share.
the skew is my fav. looks like the lists are pushing and pulling..very creative indeed.
Check out his other stuff: http://hakim.se/experiments
Any way to antialias these?
I like it ... wonder how it would look if it was added to Svbtle articles.
"twentysize"?
really nice, like it!
The temptation to use it in my current project... must... resist...