Scroll-freeze effect

[ericlindley-g]

Highly interactive documents on the web often employ a "scroll-freeze" effect, where scrolling the page temporarily stops in order to display a scroll- or time-bound animation. This activity implements this feature in AMP in such a way that it avoids common UX issues with this pattern (for instance, when the user feels "trapped" due to performance issues or unclear feedback when scrolling the page)

Name suggestions

• amp-scroll-freeze
• amp-pin-scroll
• amp-sticky-scroll
• amp-sticky-view
• amp-pin-view
• amp-sticky-page
• amp-pin-page

[aghassemi]

/cc @pbakaus @sebastianbenz

For naming, for now we went with scroll-freeze. Anyone knows what these are called in the wild? Another option: sticky-scroll?

[pbakaus]

my vote goes to "pin-scroll" or something else with pin in the name, as this prior work of art suggests: http://scrollmagic.io/

[aghassemi]

Added a name suggestion section to the description.

[aghassemi]

Also another use-case: https://www.nytimes.com/interactive/2018/09/06/world/europe/genoa-italy-bridge.html.

[pbakaus]

This page is also a good fit: https://www.apple.com/apple-music/

After talking to @spacedino, I think one thing that became clear is that ideally, the technical implementation wouldn't entirely override native scroll, but would utilize it, and simply anchor an element in place. Both the page above and the Genoa bridge page do this.

[aghassemi]

(tangent: I think most of these might be already possible with a combination of amp-position-observer, amp-animation, CSS - specially position:sticky - and amp-fx-flying-carpet. My plan is to prototype these instead of trying to create a new API initially)

[aghassemi]

this is now verified doable with position sticky, position observer and animation: https://amp-article.herokuapp.com/

We can of course make this easier. Leaving the FR open.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.