How to use animated transition in client-only paths site

[drakang4]

I'm trying to add animated transition in my client-only paths site so I looked client-only-paths example and I found out this example was actually designed to do animated transition like this

// in gatsbyjs/examples/client-only-paths/src/pages/index.js

                <ReactCSSTransitionGroup
                  transitionName="fade"
                  transitionEnterTimeout={300}
                  transitionLeaveTimeout={300}
                >
                  {/* no different than other usage of
                ReactCSSTransitionGroup, just make
                sure to pass `location` to `Route`
                so it can match the old location
                as it animates out
            */}
                  <Route
                    location={location}
                    key={location.key}
                    path="/:h/:s/:l"
                    component={HSL}
                  />
                </ReactCSSTransitionGroup>

However the example does not trigger any animation: https://client-only-paths.gatsbyjs.org/
Is there any way to do animated transition in client-only paths site?

Thanks!

[calcsam]

That's correct, Gatsby changed how it does route changes since that was created, we decided to unmount and re-mount the root div which causes a state reset and blows away that CSS.

If you're doing route changes in your client-only paths you'll probably want to look at https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions for some examples of how to animate.

[KyleAMathews]

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!