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.
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.
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 on Firefox Nightly and the Papercut and Skew animations aren't working for me. Just saying this as the site mentions that it's tested on Firefox Nightly and I'm using 14.0a1 (2012-04-14)
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.
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.
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
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.
50 comments
[ 2702 ms ] story [ 271 ms ] threadThat being said, the effects are really sweet. Zipper and Fan are my favorites.
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.
But I will come to your door with an axe if you dare use it on an actual website.
Surprised my iPhone 4 plays it, though some effects seriously lag. Here's looking at you Papercut and Skew.
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!
http://i.imgur.com/2VvTX.png