Gatsby: [using-page-transitions] page scrolls to top before transitioning to new page

Created on 29 Oct 2017  ·  3Comments  ·  Source: gatsbyjs/gatsby

Really stoked on this new example.

Repro

  1. Create a page with enough content that it's taller then the viewport, and add a 'local' link to the bottom.
  2. Scroll to then click said link.

Expected result

I think the flow should be:

  1. Fade out
  2. Scroll to top
  3. Fade in

Surely been solved before, just haven't personally dug in or looked around yet.

Actual result

  1. Scroll to top
  2. Fade out
  3. Fade in

cc @stevensurgnier (hope that's kosher)

picture dustinhorton
👍1

Most helpful comment

I have a working prototype that uses the getUserConfirmation option of history to initiate the exit animation and delay the history push. Let me test a bit more and I'll put together a PR asap.

picture stevensurgnier on 31 Oct 2017
👍4

All 3 comments

Hmm the problem is that yeah, scrolling happens immediately when the page transition starts.

How have others approached this?

KyleAMathews picture KyleAMathews on 29 Oct 2017

Totally kosher with me @dustinhorton :) thanks for helping make the feature better. I'll take a look this week.

stevensurgnier picture stevensurgnier on 30 Oct 2017

I have a working prototype that uses the getUserConfirmation option of history to initiate the exit animation and delay the history push. Let me test a bit more and I'll put together a PR asap.

stevensurgnier picture stevensurgnier on 31 Oct 2017
👍4
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hobochild picture hobochild  ·  3Comments
jaanhio picture jaanhio  ·  3Comments
totsteps picture totsteps  ·  3Comments
kalinchernev picture kalinchernev  ·  3Comments
Oppenheimer1 picture Oppenheimer1  ·  3Comments