Skip to content

Commit 7e5fc2f

Browse files
committed
Move scroll response use cases
Use cases that simply respond to scroll position (in sync with scrolling) don't require scroll customization. Move them into the compositing and scrolling use cases.
1 parent ded4931 commit 7e5fc2f

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
11
# Compositor Scrolling and Animation Use Cases
2+
3+
Parallax
4+
-----
5+
- the position of elements on the page is related to the scroll position of their container (or maybe another container)
6+
- not a direct link between scroll offset and position. Rather it is some factor, possibly with damping or a curve.
7+
- postion is the most common output, but it could also be opacity or a filter effect such as blur (or really any rendering property)
8+
9+
Scroll header
10+
----
11+
- A header at the top of the document
12+
- When approaching scrollTop=0 header smoothly animates into a more substantial one. Eg. images, opacity, text size animate with scroll position.
13+
- May also only be shown when scrolling down (like hidey bars)
14+
- Examples:
15+
- The top bar on [Twitter user pages](https://twitter.com/LEGO_Group)
16+
- Polymer's [core-scroll-header-panel](http://polymer.github.io/core-scroll-header-panel/components/core-scroll-header-panel/demos/demo9.html) and [paper-scroll-header-panel](https://elements.polymer-project.org/elements/paper-scroll-header-panel?view=demo:demo/index.html)
17+
18+
Video sync
19+
-----
20+
- Video whose time point is determined as a function of the scroll offset.
21+
- Must be synced perfectly with scrolling, eg. scrolling down one pixel may advance the video by one frame, and that video frame may move everything up one pixel to counter the scroll. To the user it must appear as if the content didn't move with the scroll.
22+
23+

0 commit comments

Comments
 (0)