
Scroll This - akshayagarwal
http://codepen.io/sol0mka/full/Jsyxq
======
zalzane
Don't forget to patent it and sue everyone who uses it, OP.

suggestion: seems to only be one level of bounciness, and it only applies at
the end of the scroll. itd be cool to see the screen morph while the scroll
occurs as a function of the velocity of the scroll, and giving a bounce that's
appropriate to the change in velocity.

~~~
throwawaykf02
Too late. Windows Phone uses similar "stretchiness" (but less cutesy) to
indicate over-scroll. It cleverly presents an effect comparable to the rubber
banding in iOS without, as far as I can tell, infringing Apple's patent.

And yes, Microsoft has patented it.

~~~
vxNsr
I actually thought the WP thing was Microsoft cross licensing Apple's stuff
(circa 1997 agreement), I don't get how it's any different from iOS. (I
originally had an iphone and recently traded it in for a WP)... How is it
different?

~~~
throwawaykf02
If you read the claims in Apples rubber banding patent, they specifically
include "displaying an area beyond the edge of the document" (in iOS, the gray
linen background) when you over scroll. Thus, instead of jarringly stopping at
the edge without any indication that a boundary has been reached, the document
keeps scrolling with your finger.

Windows Phone, however, does _not_ show an "area beyond the edge" on over
scrolling; instead, it anchors one edge of the document at the boundary, and
subtly "stretches" the rest of the document to follow your finger. The effect
is like trying to pull down an elastic sheet of paper. This indicates that the
boundary has been reached, but without showing a separate "area beyond the
edge". As such, it achieves an effect as intuitive as iOS's, but without
infringing the claims.

(Yes, you really have to be the pedantic when evaluating claims.)

I'm pretty sure this effect came about because Microsoft wanted to work around
the Apple patent. However, some sort of cross license, if not the one from the
90s, is apparently in place as well. Some UI elements in WP do infringe other
Apple patents, such as the "disappearing scroll bar" one.

~~~
vxNsr
Thanks for the explanation.

I wish they'd cross license the Universal search thing, it'd be really nice
because there's a dedicated search button on every phone.

------
shurcooL
This is neat, but really disappointing that there is no feedback when you're
at the top/bottom and try to scroll further. It'd be so natural to have this
bouncy effect happen in-place to let you know you've reached the end.

~~~
lukeholder
"really disappointing" ??

another example of the HN changes around here.

~~~
mistercow
I think shurcooL's comment probably came across differently than s/he intended
it. I think it was intended not as an expression of disapproval for the
author, but rather as a description of how it feels as a user to scroll to the
edge and not see it react in the satisfying way anticipated.

Interpreted that way, it's fine constructive feedback. But it's easy to see
how it would be taken as a self-entitled complaint.

~~~
shurcooL
Yep, that was my intention.

------
bryanjclark
Nike had this interaction a good while ago:
[http://capptivate.co/tag/nike/](http://capptivate.co/tag/nike/)

~~~
snikch
This looks to be a web implementation of the Nike iOS native implementation.

~~~
Lutin
They're actually videos of the Nike iOS native implementation.

------
jreposa
Only one improvment for me: It should bounce at the top and bottom!

~~~
cpeterso
I think Apple has a patent related to iOS' "snapback" scrolling and that's why
Android switched to using the awkward "blue glow" scroll effect.

------
JoshTriplett
Cute, in much the same way wobbly windows are cute.

Somewhat odd when scrolling via keyboard, though, since the "force" applied is
always fixed.

------
kilian
For those interested in how it's made, there's a great writeup here on
Smashing Magazine: [http://coding.smashingmagazine.com/2013/08/15/jelly-
navigati...](http://coding.smashingmagazine.com/2013/08/15/jelly-navigation-
menu-canvas-paperjs/)

------
Fuzzwah
This could be a fun control mechanism for a game too. The idea which popped
into my head was "pulling down" on the screen to initiate a ball rolling from
the left of the screen into the divot you're making, then letting go so that
the surface the ball is rolling on springs back up, sending the ball flying.

~~~
antsar
Sounds similar to the experience of launching a virtual pinball. Could be fun
to play for sure, depending on the rest of the game.

------
professorTuring
Well I don't really found it useful. Ok, it's cute; I will give you this,
but...

I have used different desktops and I have used every bell & whistle available.
And I have really enjoyed them, sure, but just for three or four days.

I think there's a lot of movement in that scroll, it's battery consuming, and
it just doesn't provide any help for the user.

But don't get me wrong, I think it's a nice project to test your design
skills, keep up working =)

------
minor_nitwit
I like it very creative. It should ripple when you strike the bottom.

------
janeglendale
Really freakin' cool, however it feels weird on mobile since there's no
momentum scrolling with it. I just stops (and has the jelly effect).

~~~
shurcooL
It has momentum for me, when using the trackpad to scroll on OS X.

------
pouzy
Cute indeed, but not sure that it's the right era anymore for jelly-looking
things ?

~~~
SimHacker
Flat Jelly: [http://en.wikipedia.org/wiki/Fruit_Roll-
Ups](http://en.wikipedia.org/wiki/Fruit_Roll-Ups)

------
akshayagarwal
Disclaimer: I didn't build this. Its something cute that I found and shared.

------
ovis
This is cute. But does it affect readability if the page being scrolled is
text?

~~~
emp_
Quickly added text to it:
[http://codepen.io/anon/full/JiCpj](http://codepen.io/anon/full/JiCpj)

------
rayhano
Love this.

But would prefer the icons to not shrink. Keep it simple with the bend.

------
bicknergseng
Fun. Would be a neat alternative to parallax on desktop web too.

------
Kiro
Lags a lot on my phone (Samsung Galaxy S3, stock browser).

------
rglover
This would be really fun in an app for kids.

------
jyz
why is china a box of rice? :D

------
pg1
Love it.

------
electronous
It looks like the lines bend the wrong way. I would expect everything to bend
down when I scroll up, but it does the opposite. Very strange.

~~~
publicfig
It's to match where your finger would be when scrolling. On a touch
device/mouse using natural scrolling it would go the direction you expect.
Using traditional/inverse scrolling does the opposite.

------
slosh
I like teh design

------
ambrop7
It's a scroll bar with the contents wobbling as you scroll it. What am I
missing, how is this useful?

~~~
null_ptr
It's a cool demo that's fun to play with. Cool demos like this can spark
people's imaginations, that's how it's useful.

