Possible to do page transitions?

🙋Get Help
29

Looking at your code it seems like you’re not using the item from the transitions mapping to display the page. You’re getting the page data from the router in your transition. What you should instead do is getting the page data from the transition item.

Here is a working example of how I’m doing page transitions in my index.js using the latest react-spring API.

[...]
    // Page transitions
    const transitions = useTransition(state.router.link, {
        from: { opacity: 0 },
        enter: { opacity: 1 },
        leave: { opacity: 0 },
        config: { duration: 200 }
    });

  return (
        <>
            <Styles/>
            <HtmlHead/>
            <Sidebar isNavVisible={state.theme.isNavVisible} />
            {transitions((style, route) => {
                const data = state.source.get(route)
                return (
                    <TransitionWrapper style={style}>
                        <Switch>
                            <Loader when={data.isFetching} />
                            <List when={data.isArchive} route={route} />
                            <Post when={data.isPost} route={route} />
                            <Page when={data.isPage} route={route} />
                            <Error when={data.isError} />
                        </Switch>
                    </TransitionWrapper>
                )}
            )}
        </>
    )
[...]

You can then fetch your page/post data in the page/post component.

[...]

const Page = ({ state, libraries, route }) => {
    const data = state.source.get(route)
    const page = state.source[data.type][data.id]
[...]

Hope that helps! :slight_smile:

3 Likes