[scrolling] Examples of interesting Scroll Effects

[grorg]

As part of understanding what we need for Compositing/UI Workers/Scroll API, it would be good to list the types of effects we're planning to enable. Rick and Ian have already mentioned:

• pull to refresh
• rubber banding
• hidey bars
• sticky positioning
• scroll snap points
• parallax

Some real work examples that are pretty interesting are:

• the top bar on twitter user pages (e.g https://twitter.com/LEGO_Group)
• the reading progress on avclub.com (http://www.avclub.com/review/weeknd-navigates-trippy-perception-and-pop-reality-224412)

What are others?

[grorg]

Rubber banding

• scroll is normal until it hits limits (input scroll amount -> output scroll amount)
• after that point, scroll output is a fraction of the input (input * factor -> output)
• upon release, animate back to limit
• also should work with a momentum deceleration (if the user has flicked far enough to hit the limits)

[grorg]

Hidey Bars

• typically have a different effect depending on the direction of scroll, and depending on whether they are attached to the top or bottom of their scroll area
• e.g. scrolling down the bar moves with the container, and disappears outside the bounds
• scrolling up, the bar animates in with a timed animation. It's position is relative to its container at this point.

Advanced

• content may "hide" into a smaller version of itself, that is sticky positioned (e.g. iPhone Safari URL bar)

[grorg]

Pull to refresh

This is one of the more tricky effects.

• Implemented with a rubber band effect
• Allows drawing into the background of the container, with fixed position, giving the illusion of it being in the negative margin of the scrolling object
• Has a threshold in the rubber band, at which point the refresh "commits". This typically triggers another animation, where the content stays where it was (its rubber-band limit) and a progress spinner is drawn in the margin. Do we consider this as if the scroll has ended and the content has moved down?
• Once the page has the refreshed data, it adds it to the DOM (causing another scroll). Or if there wasn't any data, the content animates back to the top of the container.

This means the effect has a number of inputs and outputs. input: the scroll value, the limit of the rubber band output: the final scroll position, control over the refresh drawing animation, the ability to move the content by a certain amount, the ability to cancel the effect

[grorg]

Parallax

• the position of elements on the page is related to the scroll position of their container (or maybe another container)
• not a direct link between scroll offset and position. Rather it is some factor, possibly with damping or a curve.
• postion is the most common output, but it could also be opacity or a filter effect such as blur (or really any rendering property)

[frivoal]

I've run into articles from the New York Times filled with excellent use cases for customizable scrolling. They've made a number of interesting effects, from simple snap scroll or sticky positioning, to parallax effects, fading in and out, videos sync with scrolling, and many others things.

http://www.nytimes.com/interactive/2014/09/19/travel/reif-larsen-norway.html (fading, snap points, video/animation sync)

http://www.nytimes.com/projects/2013/gun-country/ (snap points, video sync)

http://www.nytimes.com/projects/2013/the-jockey/ (fading, snap points, video/animation sync, sticky positioning...) Note the interesting pull quotes that combine it all.

http://www.nytimes.com/projects/2013/tomato-can-blues/ (parallax, sticky positioning, progressively-insert-and-move-things,

http://www.nytimes.com/projects/2012/snow-fall/ (automatic scrolling, fading, video/animation sync, sticky positioning)

[tdresser]

We should enable custom image carousels, such as those with 3D transforms, which preserve native scrolling physics.

Most examples on the web today feel somewhat awkward. This at least illustrates the idea.

[RByers]

This is great Dean, thanks! Perhaps we should convert this into a use-cases.md file we can host in the repo or something? In particular I'd like to make some edits to some of your use cases (eg. to elaborate on the tricky bits). I'll add some more here for now though to stick with your style.

[RByers]

Custom scrollers

• Rather than just translate the content on scroll, do something flashier like a 3D transform
• See libraries like ContentFlow
• A great solution needs to chain to/from nested scrollers exactly as other scrollers do
• One particular example I've seen that feels really nice (but can't find a public demo of) is a sort of physics simulation where each item (image, panel, card, etc.) moves as if there's a (dampened) spring connecting it to it's neighbors. Eg. when scrolling fast there is more separation between items. As soon as you stab an item to stop it scrolling, the other items kind of bounce into it and settle at a nice distance away.

[RByers]

Re-targeting scrolling

• A scroll occurring over one point in the document is redirected to cause scrolling somewhere else.
• Eg. GMail does this in conversation view - scroll on the right hand side (which isn't itself scrollable) and they scroll the conversation. They do this by listening for wheel events, but this doesn't work for touch.

[RByers]

Linked scrollers

• Multiple elements are to be scrolled together but possibly at different rates
• Like parallax except not overlapping, use input may occur on any of the linked elements
• One example here. AV club also appears to do this.

[RByers]

Disable scroll chaining

• Ability for an element to prevent scrolling from propagating up to an ancestor
• Eg. Facebook chat widget (or any position:fixed overlay window)
  • position: fixed container with an overflow:scroll div inside
  • When the scroller has scrollTop=0, user attempting to scroll up on top of the widget should NOT cause the document to scroll
• IE/Edge have -ms-scroll-chaining for this

[RByers]

Custom scroll limit

• Limit scrolling to a sub-region of the scrollable area
• IE/Edge has -ms-scroll-limit
• I'm actually not sure of the real-world use case for this, but I'm sure the IE team had one. Perhaps @atanassov can enlighten us?

[RByers]

Custom overscroll effect

• When reaching the scroll limit, draw a custom effect indicating how far beyond the limit scrolling is being attempted
• Takes scroll fling behavior into account. May also take precise finger position into account (eg. horizontal position in a vertical-scroll-only scroller) when drawing the effect
• Example: native scroll behavior on Android ("blue glow" pre Android L, "scroll tongue" post Android L).

[RByers]

Dean - some notes to add to pull to refresh (capturing some of the trickier details for a really great effect)

• Can transition into and out-of the overscroll effect without lifting the finger
• Can fling into the overscroll effect ("peek")
• Can fling out of the overscroll effect
• In browsers that lack scroll latching, chains correctly for spring physics. Effectively the spring "captures" the scroll impulse first when collapsing and last when expanding.
  • Eg. scrolling an iframe inside a document with p2r, pull UI starts to show, finger direction is reversed, now pull UI needs to collapse in preference is scrolling the iframe.
  • Scrolling an iframe with p2r inside of a normal document, when the limit of the iframe is reached first, the document scrolls, and only when that limit is reached does the spring effect begin (in our prototypes, anything else feels like broken physics).

[RByers]

Some additional notes for hidey bars

• When a scroll operation ends (eg. fingers lifted from touchpad), may animate to either fully shown or fully hidden

[RByers]

Scroll header

• A header that is shown only when scrolling down (like hidey bars)
• When approaching scrollTop=0 header smoothly animates into a more substantial one. Eg. images, opacity, text size animate with scroll position.
• Example Polymer's core-scroll-header-panel and paper-scroll-header-panel

[RByers]

By the way, there are a number of interesting non-scrolling compositor working uses cases too. We'll add those to the repo elsewhere (perhaps we should split the issue label to separate compositor worker from scroll customization?).

[grorg]

We should definitely move these into a text file that we can all edit.

[RByers]

As Rossen suggests on public-houdini, I'm moving these to the wiki here.

[RByers]

Ugh, apparently there are still permissions problems with the Houdini wiki (eg. @tdresser joined CSSWG just so he'd have the ability to edit the wiki, but still has been unable to get permission). This is silly - GitHub has the collaboration model right. Let's put the use cases in the repo instead.

I've created this in a fork here. Once a first version is done, I'll push it back here.

[RByers]

Ok, everything is now copied here and here, though it probably needs some more cleanup / organization. Should we close this issue, or keep it open for discussion of further updates?

[SebastianZ]

Another example of some sticky scrolling behavior is shown by the Theia Sticky Sidebar.

If the element is larger than the viewport, it will be sticky to the bottom of the viewport once you've reached the bottom of it when scrolling down. And when scrolling up it's the other way round, i.e. it will be sticky to the top of the viewport once you've reached the top of the element.

For reference, I was directed to the Houdini APIs for this by https://github.com/w3c/csswg-drafts/issues/2558.

Sebastian