Gatsby: Junky page transition animation due to scroll to page top

[d-ivashchuk]

Summary

I am trying to implement transitions between pages in my Gatsby blog. Although they work as expected, there is a problem I can't get rid of : when I scroll the page to the bottom, on click on gatsby-link the page will be scrolled to the top before actually transitioning.

Relevant information

My Transition component is nothing fancy and looks exactly like explained in Gatsby docs

import React from "react"
import {
    TransitionGroup,
    Transition as ReactTransition,
} from "react-transition-group"

const timeout = 1000
const getTransitionStyles = {
    entering: {
        position: 'absolute',
        opacity: 0,
    },
    entered: {
        transition: `opacity ${timeout}ms ease-in-out`,
        opacity: 1,
    },
    exiting: {
        transition: `all ${timeout}ms ease-in-out`,
        opacity: 0,
        transform: 'translateY(-300px)',
    },
}

class Transition extends React.PureComponent {
    render() {
        const { children, location } = this.props

        return (
            <TransitionGroup>
                <ReactTransition
                    key={location.pathname}
                    timeout={{
                        enter: timeout,
                        exit: timeout,
                    }}
                >
                    {status => (
                        <div
                            style={{
                                ...getTransitionStyles[status],
                            }}
                        >
                            {children}
                        </div>
                    )}
                </ReactTransition>
            </TransitionGroup>
        )
    }
}

To reproduce this issue open the following link , scroll to Second Blog and click on its card. Before transitioning to the contents of Second Blog the page will actually scroll to Third Blog.

Expected behavior

Maybe it's default behavior of link but I want to fix this problem so transition will be done from the current position of the view.

Thanks a lot for helping me out and as usual thanks for an amazing job of maintaining Gatsby!

[kakadiadarpan]

@d-ivashchuk can you provide environment information by running gatsby info --clipboard?

This issue is reproducible at https://using-page-transitions.netlify.com/ as well.

/cc @pieh @m-allanson

[d-ivashchuk]

Here goes env information:

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 6.10.1 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 56.0.2
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19 
    gatsby-image: ^2.0.15 => 2.0.15 
    gatsby-plugin-feed: ^2.0.8 => 2.0.8 
    gatsby-plugin-google-analytics: ^2.0.5 => 2.0.5 
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1 
    gatsby-plugin-layout: ^1.0.4 => 1.0.4 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5 
    gatsby-plugin-offline: ^2.0.5 => 2.0.5 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-sharp: ^2.0.6 => 2.0.6 
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0 
    gatsby-plugin-typography: ^2.2.0 => 2.2.0 
    gatsby-remark-copy-linked-files: ^2.0.5 => 2.0.5 
    gatsby-remark-images: ^2.0.4 => 2.0.4 
    gatsby-remark-prismjs: ^3.0.0 => 3.0.0 
    gatsby-remark-responsive-iframe: ^2.0.5 => 2.0.5 
    gatsby-remark-smartypants: ^2.0.5 => 2.0.5 
    gatsby-source-filesystem: ^2.0.2 => 2.0.2 
    gatsby-source-graphcms: ^1.0.0-alpha.3 => 1.0.0-alpha.3 
    gatsby-transformer-remark: ^2.1.6 => 2.1.6 
    gatsby-transformer-sharp: ^2.1.3 => 2.1.3 
  npmGlobalPackages:
    gatsby-cli: 2.4.3

[stefanprobst]

See https://github.com/gatsbyjs/gatsby/issues/5213#issuecomment-428368131

[thorn0]

Should we close this in favor of #5213?

[kakadiadarpan]

@thorn0 Yes, let's do that.

@d-ivashchuk we'll be closing this issue, please follow #5213 for updates on gatsby-page-transition component.