

CSS3 Scroll Effects - Brajeshwar
http://lab.hakim.se/scroll-effects/

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

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

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

~~~
yaix
Good designers sure are. I was more worried about the bad designers ;)

~~~
ed209
Bad designers don't need help from experimental css to create bad experiences
:)

------
bitanarch
The effect is awesome, but on a real website it's most probably excessive
design.

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

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

~~~
splatcollision
Any public link or none yet?

~~~
redler
Nothing yet; it still has some pretty ugly parts. As soon as it's ready,
though.

~~~
digitallimit
Keep me posted! (mherodev at gmail)

------
TazeTSchnitzel
Cool effect.

But I will come to your door with an axe if you dare use it on an actual
website.

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

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

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

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

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

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

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

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

------
th0ma5
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-...](http://www.theverge.com/2011/12/9/2616204/the-
condescending-ui) ... 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.

------
splatcollision
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!

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

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

------
nchuhoai
Wow, I have never heard of this. What is triggering the transformations?

~~~
th0ma5
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?

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

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

------
yogrish
Very nice effects. But, Out of all "SKEW" seems smooth to my eyes and then
comes tilt and Papercut. How about you guys??

------
shawnz
This could be very useful for populating load-on-scroll lists. I think Flip
and Tilt are the least distracting.

------
james33
I love all of these different CSS3 transform effects people are coming up
with!

------
azakai
Nice, but all of these max out the CPU on all the browsers I've tried...

~~~
johnpowell
Same here..

<http://i.imgur.com/2VvTX.png>

------
zbowling
Trying to replicate some these on iOS with core animation.

~~~
joering2
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!

------
chetan51
Anyone know how this is working on iOS Mobile Safari?

~~~
sunsu
Works well on my 4S, although sometimes it can get choppy.

------
evanm
This is awesome. Thanks for the share.

------
fady
the skew is my fav. looks like the lists are pushing and pulling..very
creative indeed.

------
Kiro
Check out his other stuff: <http://hakim.se/experiments>

------
Ranguvar
Any way to antialias these?

------
danjessen
I like it ... wonder how it would look if it was added to Svbtle articles.

------
Amadiro
"twentysize"?

------
binarydreams
really nice, like it!

------
mvasilkov
The temptation to use it in my current project... must... resist...

