Scroll position #76

MathiasKandelborg · 2019-04-21T09:51:29Z

Is it by design that scroll position is reset to the top whenever a route change happens via this packages link? To me, it looks like it's breaking the flow gained by the animations, the jump to the top is quite extreme.

Also, clicking on a link routing to the URL one is currently on triggers a scroll to the top.

Oh well, I couldn't find anything about this particular question. There's some conversation around scroll position not being updated/used properly, but I think this is different in nature. There might not even be a bug, but behavior which I personally deem unwanted/buggy.

I love this package! It's so easy to get started with and extend to one's needs! Very good job, I'm amazed by the ease of use.

TylerBarnes · 2019-04-21T22:55:44Z

THanks for the compliment!
Yes this is by design so that the entering page always starts at the top.
My personal flow for working with this is to set the exiting page to overflow hidden and then change the scroll top of the exiting page to whatever the scroll position was.

I've been thinking of adding a new feature which allows you to control the scrolling yourself.

I'm thinking something like:

<Link to={...} exit={...} entry={...} preventScrollJump>Go home</Link>

What do you think?

Alternatively I've been thinking of adding css to lock the scroll on the body element and then add overflow auto to the individual page elements but I think this may break some other packages so I'm not too sure on what the best way forward with this one is.

TylerBarnes · 2019-04-21T23:06:41Z

Hmm, actually maybe this would be better as a plugin setting in gatsby-config.js.
I could probably offer both scrolling strategies, either the current way where the body scrolls, or the alternative where each individual page scrolls on their own. I think I like that.

dlimx · 2019-08-13T03:36:25Z

@TylerBarnes any update on this? Accepting PRs to this/#71?

TylerBarnes · 2019-08-13T03:51:01Z

@dlimx no updates yet. I'm definitely accepting PR's!

blimpmason · 2019-08-15T02:30:03Z

@TylerBarnes I'm seeing this jump to the top on exit even with the AniLink fade links shown on the example site: https://gatsby-plugin-transition-link.netlify.com/ (try scrolling down a little and then clicking the "Fade to page 2" link.

It seems the holdPosition CSS passed to GSAP is not preventing the scroll jump. I'm having the same issue in one of my projects and the only solution is to set the exit duration to 0.

const holdPosition =
    direction === "out"
      ? {
          overflowY: "hidden",
          height: "100vh",
          scrollTop: scrollTop
        }
      : {};

TylerBarnes · 2019-08-15T02:34:05Z

@blimpmason I think I'm going to have to put out a v2 with breaking changes and rethink how the pages are handled. Any help is appreciated! Wether that's PR's or even suggestions / ideas. It's a ton of work maintaining this plugin + my other plugins & working full time.

TylerBarnes · 2019-08-15T02:36:44Z

I think when I changed the animation strategy from using absolute positioned pages to how it is now, it broke some of these animations as well without me realizing. Does anyone have ideas on how to add tests for animations?

blimpmason · 2019-08-15T03:55:17Z

@TylerBarnes thanks for the response, and your work is really appreciated!

I lack the relevant experience to contribute at the moment but I'll ping you if I come up with any ideas as I dig deeper.

JakobG-dev · 2019-09-06T07:06:24Z

Any updates on this?

TylerBarnes · 2019-09-06T18:38:49Z

@Jaki117 yep! I've been working on a V2. Nothing to beta test or show yet as I have limited time to work on this project, but I'll let you know when there's something to try

sangeet · 2019-09-11T01:47:44Z

Hi, I have a AniLink in my Navbar which points to /#contact , but it isn't really scrolling down to the contact section of the page when clicking on it from another page. Is this issue in any way related to me using AniLink and it disabling shouldUpdateScroll ?

sangeet · 2019-09-11T01:56:48Z

Yeah, did a bit of testing. Removed all the AniLink from my shared Navbar and changed them to Link and now my hashed link i.e /#contact is working just fine again.

I believe this is a bug which is being caused by AniLink but I could be wrong about this. Can you please confirm this behavior because I am unsure whether to open a new issue about this or not. For all we know, it could be something wrong with my specific setup.

yurkoturskiy · 2019-10-24T23:33:07Z

Not sure that my case is related to this issue, but it seems like it is.
I had a scroll jump at the end of the exit page with TransitionLink.
I solved this by setting the position property to absolute. Now scroll stays where it should.

*Edited: Also, it is important to set overflow: hidden. For some reason, it doesn't work on phones without it.

<TransitionLink
  ...
  exit={{
    trigger: ({ node, exit, e }) => {
      node.style.position = 'absolute'
      node.style.top = '0px'
      node.style.left = '0px'
      node.style.overflow = 'hidden'

      handleClick(e)
    },
    length: 1,
  }}
  ...
>
  {props.children}
</TransitionLink>

edoardolunardi · 2019-10-27T10:41:10Z

@TylerBarnes any hacky way to completely prevent the window from jumping to the top? I don't need it, since I have 100vh components to navigate to (so it's guaranteed they are fully displayed on the page), but when I go back to the homepage, I need to keep the scroll position. Thank you! (I'm using AniLink)

TylerBarnes · 2019-10-30T00:22:50Z

@edoardolunardi you could use component shadowing to override the file from your Gatsby site until there's a fix for this.
I joined the Gatsby core team a few weeks ago and I'm able to work on this plugin during work hours now! So things should start picking up a bit more around here soon.

solubletech · 2019-11-22T09:22:24Z

@edoardolunardi @TylerBarnes Hey guys, you can prevent window scroll jump to top at the start of the exit transition, adding an appearAfter on entry param.

Look this example:

<TransitionLink  
     to={`/${finalLink}`}
     partiallyActive={true}
     exit={{
          length: 1.5,
          trigger: ({node, exit, e}) => transitionExitPage(node, exit, e)
      }}
      entry={{
          appearAfter: 0.75,
          length: 1.5,
          trigger: ({node, entry, exit, e}) => transitionEnterPage(node, entry, exit, e)
       }}
>
   {children}
</TransitionLink>

In this example, window scroll jump to top after 0.75ms. Once you have control over scroll, you could manage easily entry animation on trigger method.

tqwewe · 2019-12-05T07:44:01Z

Looking forward to seeing a simple solution such as preventScrollJump! I am using this on my portfolio site and really need this feature as it currently breaks the flow! :)

TylerBarnes · 2019-12-09T22:28:04Z

@acidic9 upgrade to gatsby-plugin-transition-link@1.17.0 to use the preventScrollJump prop on transition link

zuzy-dev · 2020-02-20T20:21:33Z

@TylerBarnes thank you for your hard work!

Is there a way to get this working with the AniLink-Component? Or is this not possible/part of the concept?

I have a long list of links to my articles. The user can navigate to the content of these links via AniLinks. But when they return from my article (via an AniLink-Component) the scrollposition of the list is back at the top. And the user has to scroll down again...
Adding preventScrollJump as a prop to the component does not work.
I'm not using the Link import from Gatsby nor the gatsby-plugin-layout.
Am I missing something? Where do you think is a good starting point to investigate further?

Sorry to bother you but wrapping my head around the concept is hard as i'm quite new and still learning the bells and whistles of gatsby.

TylerBarnes · 2020-03-04T23:06:30Z

@Lucasdon If it's not working currently it may need to be wired up in the AniLink components. If you're up to making a PR for it I can guide you through how to get set up. If you're interested, open a new issue with a description of your problem and assign it to yourself and @ me

zuzy-dev · 2020-04-23T16:11:16Z

@TylerBarnes

I was digging around this issue a lot and I now think it is not really related to your plugin. I have opened a Stack Overflow Question, because I think it is in a different scope. But it would be nice if you could review it and confirm I'm not absolutely wrong. If I'm wrong I'm happy to try a PR.

I hope you and everyone else is safe and sound in this strange times...

joebentaylor1995 · 2021-06-23T22:51:19Z

When changing pages the scroll position stays the same so the next page doesn't start at the very top

joebentaylor1995 · 2021-07-30T13:12:35Z

Any update on this ^ @TylerBarnes

A few friends have also had the same issue

joebentaylor1995 · 2021-09-09T22:16:02Z

Just bumping this again...

joebentaylor1995 · 2021-09-17T14:55:33Z

And again...

TylerBarnes · 2021-09-17T16:59:26Z

@joebentaylor1995 I'm thinking of deprecating this package :( I don't have the time to work on it even though I really wish I did. I will probably advocate for someone to fork it and continue dev on a new package. If someone does that I will add a link to the top of the Readme and the docs site

joebentaylor1995 · 2021-09-17T17:10:21Z

:( Is there any other solutions to page transitions in Gatsby? Kind regards, Joe

…

On 17 Sep 2021, at 17:59, Tyler Barnes ***@***.***> wrote: @joebentaylor1995 I'm thinking of deprecating this package :( I don't have the time to work on it even though I really wish I did. I will probably advocate for someone to fork it and continue dev on a new package. If someone does that I will add a link to the top of the Readme and the docs site — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

TylerBarnes · 2021-09-17T17:18:09Z

I just did a quick google search and it looks like this package https://www.npmjs.com/package/gatsby-plugin-transitions took some inspiration from transition link (they even have a TransitionLink component). I can't vouch for it since I know nothing about it but it might be worth a try.

edoardolunardi · 2021-09-17T19:16:59Z

Hey @joebentaylor1995,
Gatsby has evolved since this plugin was released.

I think today the way to go for page transitions in React in general is using the great Framer Motion: let's just remember that pages in React are components mounting and unmounting, and framer offers a nice api to control this.

So I suggest to dive into the (new) Gatsby docs and try framer, it's what I usually use to handle page transitions in React (Gatsby or Next or whatever doesn't matter!)

ps: @TylerBarnes thanks for the plugin, I used it in a couple of projects like 2 years ago 🤝

joebentaylor1995 · 2021-09-17T19:34:24Z

I actually use this plugin still with framer motion. Kind regards, Joe

…

On 17 Sep 2021, at 20:17, Edoardo Lunardi ***@***.***> wrote: Hey @joebentaylor1995, Gatsby has evolved since this plugin was released. I think today the way to go for page transitions in React in general is using the great Framer Motion: let's just remember that pages in React are components mounting and unmounting, and framer offers a nice api to control this. So I suggest to dive into the (new) Gatsby docs and try framer, it's what I usually use to handle page transitions in React (Gatsby or Next doesn't matter!) ps: @TylerBarnes thanks for the plugin, I used it in a couple of projects like 2 years ago 🤝 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android.

TylerBarnes mentioned this issue Apr 24, 2019

Update scroll position when mixing transitionlink and gatsby-link #45

Closed

TylerBarnes mentioned this issue Dec 9, 2019

feat: add option to prevent automatically scrolling to the top of the page … #162

Merged

TylerBarnes closed this as completed in #162 Dec 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scroll position #76

Scroll position #76

MathiasKandelborg commented Apr 21, 2019

TylerBarnes commented Apr 21, 2019

TylerBarnes commented Apr 21, 2019

dlimx commented Aug 13, 2019

TylerBarnes commented Aug 13, 2019

blimpmason commented Aug 15, 2019

TylerBarnes commented Aug 15, 2019

TylerBarnes commented Aug 15, 2019 •

edited

blimpmason commented Aug 15, 2019

JakobG-dev commented Sep 6, 2019

TylerBarnes commented Sep 6, 2019

sangeet commented Sep 11, 2019 •

edited

sangeet commented Sep 11, 2019

yurkoturskiy commented Oct 24, 2019 •

edited

edoardolunardi commented Oct 27, 2019 •

edited

TylerBarnes commented Oct 30, 2019

solubletech commented Nov 22, 2019 •

edited

tqwewe commented Dec 5, 2019

TylerBarnes commented Dec 9, 2019

zuzy-dev commented Feb 20, 2020 •

edited

TylerBarnes commented Mar 4, 2020

zuzy-dev commented Apr 23, 2020

joebentaylor1995 commented Jun 23, 2021

joebentaylor1995 commented Jul 30, 2021

joebentaylor1995 commented Sep 9, 2021

joebentaylor1995 commented Sep 17, 2021

TylerBarnes commented Sep 17, 2021

joebentaylor1995 commented Sep 17, 2021 via email

TylerBarnes commented Sep 17, 2021

edoardolunardi commented Sep 17, 2021 •

edited

joebentaylor1995 commented Sep 17, 2021 via email

Scroll position #76

Scroll position #76

Comments

MathiasKandelborg commented Apr 21, 2019

TylerBarnes commented Apr 21, 2019

TylerBarnes commented Apr 21, 2019

dlimx commented Aug 13, 2019

TylerBarnes commented Aug 13, 2019

blimpmason commented Aug 15, 2019

TylerBarnes commented Aug 15, 2019

TylerBarnes commented Aug 15, 2019 • edited

blimpmason commented Aug 15, 2019

JakobG-dev commented Sep 6, 2019

TylerBarnes commented Sep 6, 2019

sangeet commented Sep 11, 2019 • edited

sangeet commented Sep 11, 2019

yurkoturskiy commented Oct 24, 2019 • edited

edoardolunardi commented Oct 27, 2019 • edited

TylerBarnes commented Oct 30, 2019

solubletech commented Nov 22, 2019 • edited

tqwewe commented Dec 5, 2019

TylerBarnes commented Dec 9, 2019

zuzy-dev commented Feb 20, 2020 • edited

TylerBarnes commented Mar 4, 2020

zuzy-dev commented Apr 23, 2020

joebentaylor1995 commented Jun 23, 2021

joebentaylor1995 commented Jul 30, 2021

joebentaylor1995 commented Sep 9, 2021

joebentaylor1995 commented Sep 17, 2021

TylerBarnes commented Sep 17, 2021

joebentaylor1995 commented Sep 17, 2021 via email

TylerBarnes commented Sep 17, 2021

edoardolunardi commented Sep 17, 2021 • edited

joebentaylor1995 commented Sep 17, 2021 via email

TylerBarnes commented Aug 15, 2019 •

edited

sangeet commented Sep 11, 2019 •

edited

yurkoturskiy commented Oct 24, 2019 •

edited

edoardolunardi commented Oct 27, 2019 •

edited

solubletech commented Nov 22, 2019 •

edited

zuzy-dev commented Feb 20, 2020 •

edited

edoardolunardi commented Sep 17, 2021 •

edited