New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Master feature] Scroll-freeze effect #18706

Open
ericlindley-g opened this Issue Oct 12, 2018 · 6 comments

Comments

@ericlindley-g
Collaborator

ericlindley-g commented Oct 12, 2018

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

This comment has been minimized.

Member

aghassemi commented Oct 12, 2018

/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

This comment has been minimized.

Collaborator

pbakaus commented Oct 15, 2018

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

This comment has been minimized.

Member

aghassemi commented Oct 15, 2018

Added a name suggestion section to the description.

@aghassemi

This comment has been minimized.

@pbakaus

This comment has been minimized.

Collaborator

pbakaus commented Oct 22, 2018

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

This comment has been minimized.

Member

aghassemi commented Oct 22, 2018

(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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment