React-Next page transitions v1.0.0-beta.2: Simple and customizable page transitions for Next.js apps

icon
Latest Release: v1.0.0-beta.2

Changelog

  • Add ability to customize the tag or component used to render the page wrapper.
Source code(tar.gz)
Source code(zip)

next-page-transitions

Simple and customizable page transitions for Next.js apps

npm version

Demo: https://next-page-transitions.now.sh/

What does this library do for me?

Simply put, it makes it easy to add page transitions to apps build with Next.js. It may work with other frameworks, but it was designed around the new App component and the way that Next.js handles pages. Specifically, it solves the problem of making sure only one page component is mounted at a time and that the next page isn't mounted until the previous one has completed its exit animation. It also has built-in support for showing a loading indicator if your page component has to load data before it can be shown.

Examples

If you prefer to learn by example, check out the examples directory for some Next.js apps that demonstrate how this library can be used.

Getting started

First, install the package:

npm install --save next-page-transitions

Next, ensure that your app has a custom App component; if not, follow the example on the Next.js readme to create one. Then, in your App's render method, wrap the page Component in a PageTransition component. You'll also have to define your own CSS classes that achieve the transition animations that you want. To keep this library simple and to account for the wide variety of ways that people produce and consume CSS, it doesn't offer any built-in styles and has no particular opinion about how the styles end up on your page. The example below has a simple transition that fades pages in and out.

import App, { Container } from 'next/app'
import React from 'react'
import { PageTransition } from 'next-page-transitions'

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  render() {
    const { Component, pageProps, router } = this.props
    return (
      <Container>
        <PageTransition timeout={300} classNames="page-transition">
          <Component {...pageProps} key={router.route} />
        </PageTransition>
        <style jsx global>{`
          .page-transition-enter {
            opacity: 0;
          }
          .page-transition-enter-active {
            opacity: 1;
            transition: opacity 300ms;
          }
          .page-transition-exit {
            opacity: 1;
          }
          .page-transition-exit-active {
            opacity: 0;
            transition: opacity 300ms;
          }
        `}</style>
      </Container>
    )
  }
}

When you move to a new page, the key prop will change, and the PageTransition component will detect that. Instead of immediately unmounting the page, it will apply the page-transition-exit class to a wrapper around the page to initialize the "exit" transition, and will then apply the page-transition-exit-active class as well to begin the transition. This is very similar to how the react-transition-group library does things. After the previous page has been animated out, the new page is mounted and a similar pair of .page-transition-enter and page-transition-enter-active classes will be applied. This process repeats every time a new page is navigated to.

Note: in previous versions of next-page-transitions, it wasn't necessary to specify the key prop on children of PageTransition. However, to make hot module reloading work correctly, it was necessary to make this prop required. Moving foward, children that don't specify a key prop will trigger a warning in the console. In the future, this may become a runtime error.

Support for delayed enters

Suppose you have a page that needs to make a network request before it can display its content. You could have the page itself render a loading spinner until it's ready to go, but then you lose the beautiful page transition animation you spent all that time perfecting. Luckily, this library makes it easy to handle that case.

If you add a static property pageTransitionDelayEnter = true to your page component, your page will be passed a special callback prop that you can use to indicate that everything has finished loading. In the meantime, your page will be mounted, but the enter transition won't be started yet, and a loading indicator of your choice will be shown in its place. When you call the callback prop, the loading spinner will be hidden, and your page will be animated into place! By default, the callback is passed via the pageTransitionReadyToEnter prop, but this can be specified by setting the loadingCallbackName prop on your PageTransition component.

Note: make sure that your component returns null from its render() function until it has finished loading its content and is ready to be animated in. Your page will still be in the React component tree while it's loading!

"But my network requests are usually fast!", you'll say. "They usually take only a few hundred milliseconds, and I don't want to flash a loading indicator on the screen for such a short period of time!" This library can handle that case as well. If you specify a loadingDelay prop, the loading indicator won't be shown until that much time has elapsed. If your component is ready to enter before then, the loading indicator will never be shown, keeping the UX clean and snappy. However, if your component is taking a long time, the loading indicator will be shown until your component is ready.

"That sounds kind of like the Placeholder concept from that React suspense talk. The one in this YouTube video." Yes, yes it does! That was the inspiration for this feature.

Here's an example component that simulates a network request with a timeout:

class About extends React.Component {
  static pageTransitionDelayEnter = true

  constructor(props) {
    super(props)
    this.state = { loaded: false }
  }

  componentDidMount() {
    this.timeoutId = setTimeout(() => {
      this.props.pageTransitionReadyToEnter()
      this.setState({ loaded: true })
    }, 2000)
  }

  componentWillUnmount() {
    if (this.timeoutId) clearTimeout(this.timeoutId)
  }

  render() {
    if (!this.state.loaded) return null
    return <div>Hello, world!</div>
  }
}

Assume for a moment that you have a Loader component that rendering a nice spinning loading indicator. You'll have to tell the PageTransition component that you want to use this component, and how long you want to wait until showing the network indicator:

<PageTransition
  timeout={300}
  classNames="page-transition"
  loadingComponent={<Loader />}
  loadingDelay={500}
  loadingTimeout={{
    enter: 400,
    exit: 0,
  }}
  loadingClassNames="loading-indicator"
>
  <Component {...pageProps} key={router.route} />
</PageTransition>

You'll also have to add styles if you want the loading indicator to be animated on/off the screen. If you want it to appear/disappear without any animation, you can add loadingTimeout={0} and omit the loadingClassNames property.

Check out the delayed-enter app under the examples directory for a complete example of what this looks like. The "About" page (pages/about.js) will wait 2 seconds before displaying its content, and in the meantime, the component at components/Loader.js will be displayed. Play around with the various delays to gain a deeper sense of how this component works.

PageTransition props

  • classNames: Specifies the class names that will be applied to the page wrapper to drive the page transition animations. Analogous to the classNames prop of react-transition-group's CSSTranstition component. However, note that only the string form of that prop is supported at present. Also, note that this library doesn't have a separate "appear" state; only "enter" and "exit" classes are needed.
  • tag: Specifies the tag or component that will be used to render the page wrapper. This element will receive the classNames prop. This is useful if you want to use semantic markup, e.g. if you want to render the page wrapper as main, or if you need to further customize the styling or behavior of the page wrapper.
  • timeout: Specifies timeouts for the page transition animations. Analogous to the timeout prop of react-transition-group's CSSTranstition component.
  • loadingComponent: A React element to be shown while
  • loadingDelay: The duration to wait before showing the loading indicator, in milliseconds. If a page finishes loading before this duration has elapsed, the loading component will never be shown. Defaults to 500ms.
  • loadingCallbackName: Specifies the name of the prop that your page will receive to call when it's done loading. Defaults to pageTransitionReadyToEnter
  • loadingTimeout: Analogous to the timeout prop of react-transition-group's CSSTranstition component. If this prop is set to 0, the loading indicator won't be animated on/off the screen.
  • loadingClassNames: Specifies the class names that will be applied to the loading component if one is specified. Analogous to the classNames prop of react-transition-group's CSSTranstition component.
  • monkeyPatchScrolling: By default, Next's Link component will scroll to the top of the page whenever it is clicked; this can have an undesirable jumpy effect when a page is transitioning out. If this prop is set to true when the component is mounted, then window.scrollTo will be monkey-patched so that programmatic scrolling can be disabled while a page is transitioning out. Defaults to false, since this potentially sketchy behavior should be opt-in.
  • skipInitialTransition: Specifies if page transition will be omitted on first mount. If you want to have transitions only between pages, not on first page load, set skipInitialTransition to true. By default, skipInitialTransition is set to false.

Contributing

PRs are welcome! Before working on and submitting a PR, please make an issue describing the feature you want to build. It may be outside the scope of this project, or a maintainer might already be working on it.

Comments

  • Loader not rendering
    Loader not rendering

    Nov 26, 2021

    Loader not rendering

    Am I missing something?

    <PageTransition
        timeout={400}
        classNames="page-transition"
        loadingComponent={<Loader />}
        loadingDelay={800}
        loadingTimeout={{
            enter: 400,
            exit: 0,
        }}
        loadingClassNames="loading-indicator"
    >
        <Component {...pageProps} key={router?.route}/>
    </PageTransition>
    
    
    Reply
  • Bump next from 8.0.3 to 11.1.3 in /examples/delayed-enter
    Bump next from 8.0.3 to 11.1.3 in /examples/delayed-enter

    Dec 9, 2021

    Bumps next from 8.0.3 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump next from 8.0.3 to 11.1.3 in /examples/complex-animation
    Bump next from 8.0.3 to 11.1.3 in /examples/complex-animation

    Dec 9, 2021

    Bumps next from 8.0.3 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump next from 8.0.3 to 11.1.3 in /examples/skip-initial-transition
    Bump next from 8.0.3 to 11.1.3 in /examples/skip-initial-transition

    Dec 9, 2021

    Bumps next from 8.0.3 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump next from 8.1.0 to 11.1.3 in /examples/multiple-transitions
    Bump next from 8.1.0 to 11.1.3 in /examples/multiple-transitions

    Dec 9, 2021

    Bumps next from 8.1.0 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump next from 8.0.3 to 11.1.3 in /examples/slide-and-fade
    Bump next from 8.0.3 to 11.1.3 in /examples/slide-and-fade

    Dec 9, 2021

    Bumps next from 8.0.3 to 11.1.3.

    Release notes

    Sourced from next's releases.

    v11.1.3

    See https://github.com/vercel/next.js/releases/v12.0.5 for details about this patch.

    v11.1.3-canary.105

    Core Changes

    • Update swc-minify-enabled link: #30290
    • Fix middleware header propagation: #30288
    • Move outputFileTracing config up: #30295
    • Track usage of swc features: #30297
    • Ensure null bytes in resolved path are handled: #30313
    • Improve deprecation errors for new middleware API: #30316

    Documentation Changes

    Example Changes

    • Update image component example to use AVIF: #30294

    Credits

    Huge thanks to @​ijjk, @​styfle, @​padmaia, @​javivelasco, and @​leerob for helping!

    v11.1.3-canary.104

    Misc Changes

    • Add necessary workflow job dependencies: #30291

    v11.1.3-canary.103

    Core Changes

    • Warn when mutating res if not streaming: #30284
    • Chore/publish all swc: #30289

    Credits

    Huge thanks to @​kara for helping!

    v11.1.3-canary.102

    Core Changes

    • Add warning when LCP image is missing priority prop: #30221
    • New Middleware API signature: #30282
    • Fix trace case with tsconfig/jsconfig baseUrl: #30286

    Documentation Changes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by vercel-release-bot, a new releaser for next since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • feature request: skipInitialTransitionIn
    feature request: skipInitialTransitionIn

    Jul 16, 2018

    I want page transitions, but only between pages.. not on the initial page load

    because:

    • I want that snappy/fast first meaningful paint of next.js, thanks to the server-rendered markup that is displayed before any js is even run.
    • For SEO, I want to be certain that all robots recognize the contents as visible. I know the contents are rendered server-side, but with the styles it isn't visible, and I believe some intelligent crawlers ignore content that is not in a visible state.

    I propose supporting this this via a new boolean prop skipInitialTransitionIn.

    Without this behavior, the benefits of SSR seem to be defeated.

    @illinois what do you think? is it possible?

    Reply
  • Page transition rerendering component when _app state changes
    Page transition rerendering component when _app state changes

    Jan 12, 2019

    Hello,

    I am using this component for transitioning routed component in nextjs.

    Problem comes when you change something in state in _app.js file, which manages applications wrapper, render will fire, which is expected behavior. But along with it, children of <PageTransition> component will re-render. Now, this will unmount and mount everything inside.

    There should be some kind of custom shouldComponentUpdate implementation that if children don't change, you don't re-render them. Since the point of transition is to animate only if children of <PageTransition> change.

    I suppose this can be solved if you replace React.Component with React.PureComponent, i guess that shallow comparison of React will do the job.

    Thanks, Mario

    Reply
  • Added skipInitialTransition prop
    Added skipInitialTransition prop

    Mar 12, 2019

    Implementation of feature request from issue #8 .

    I've added skipInitialTransition prop to PageTransition. If skipInitialTransition is set to true, PageTransition omits transition on first mount. By default, skipInitialTransition is set to false.

    Example:

    <PageTransition skipInitialTransition={true} timeout={500} classNames="page-transition">
      <Component {...pageProps} />
    </PageTransition>
    Reply
  • Error when running on production env
    Error when running on production env

    Jan 20, 2019

    Hello,

    running the example https://github.com/zeit/next.js/tree/master/examples/with-next-page-transitions on production env triggers an error:

    TypeError: Cannot read property 'isRequired' of null at Object. (/home/freddy/Workspace/workspace-projects/workspace-together/with-next-page-transitions/node_modules/next-page-transitions/lib/PageTransition.js:300:37)

    Which refers to this: line 300 - PageTransition.js timeout: _PropTypes.timeoutsShape.isRequired,

    When looking from the origin of the problem, I found this line on the react-transition-group dependency

    var timeoutsShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({ enter: _propTypes.default.number, exit: _propTypes.default.number }).isRequired]) : null;

    Note: this problems does not appear on the 1.0.0-alpha.1 release because back then we had on PageTransition.js:

    timeout: _PropTypes.timeoutsShape

    Regards,

    Freddy

    Reply
  • What is the best way to have different transitions based on the app state?
    What is the best way to have different transitions based on the app state?

    Jan 1, 2019

    Say that I have two pages PageA and PageB.

    I want to transition between PageA -> PageB using TransitionX.

    But when I'm navigating between PageB -> PageA I want to use TransitionY.

    Is this easily achieved with this package or is it best to use a more custom solution? (React Spring or similar)

    Reply
  • Component is re-rendered before leaving the page
    Component is re-rendered before leaving the page

    Feb 5, 2019

    Hi all :wave:

    I'd love to use this library in my project but I'm having an issue with route changes. When I leave a page that is re-rendered. This throws an error in some cases because the route has changed in the meantime and the component can't find some route parameters.

    Let me give you an example.

    • I'm in the index /
    • I navigate to /category?id=6 which renders category.js page
    • I navigate back to /
    • the URL changes from /category?id=6 to /
    • before leaving category.js the component is re-rendered. Since the category.js page relies on the id parameter an error is thrown

    Am I doing something wrong here?

    Reply