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.
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.
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.
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.
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 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
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.
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.