React-Nextjs page transitions: Travel App, Native-like Page Transitions (:atom: with React & Next.js)

Page Transitions Travelapp

Fork

? , hello there! This repository is a rewrite with React & Next.js of Sarah Drasner's orginal work with Vue & Nuxt.

Live demo: https://page-transitions.now.sh

Original

This demo shows an example of how to achieve native-like page transitions on the web. There's much to be improved here- it's not meant to be a full-fledged web application, just a quick demo to show how this kind of implementation could theoretically work. These concepts can and should be expressed differently in your own application, the sky's the limit here! This is created with Nuxt and Vue.

Article explaining the demo is available at https://css-tricks.com/native-like-animations-for-page-transitions-on-the-web

Live demo at https://page-transitions.com/

See the page transitions travel app demo for a real-life use case: https://github.com/sdras/page-transitions-travelapp

Build Setup

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

For detailed explanation on how things work, checkout the Next.js docs.

Comments

  • Bump gsap from 1.20.4 to 3.6.0
    Bump gsap from 1.20.4 to 3.6.0

    Jan 25, 2021

    Bumps gsap from 1.20.4 to 3.6.0.

    Commits

    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
  • Refresh that hacky implementation with some cool new architecture
    Refresh that hacky implementation with some cool new architecture

    Sep 3, 2018

    This PR is whole refactor of the app, without adding new features

    Context

    This copycat of the original page-transitions project has been developed in a few hours on a late Wednesday night in Helsinki, Finland.

    The structure is as high-fidelity as possible from the original project, using Next.js & React.

    New implementation

    This PR is a refactor of the app, piece by piece, commit by commit (follow along with the history!).

    Most of the transitions are now powered by react-spring

    styled-components replaces nested styled-jsx (not supported anymore, for good reasons!)

    Overall, it's about clarity: components can be viewed in isolation thanks to react-cosmos and are typed with Flow

    Conclusion

    It was awesome to refresh this app with some of my favorite technologies 🌮

    enhancement 
    Reply
  • Add next/babel presets
    Add next/babel presets

    May 25, 2018

    Hello, with a custom .babel file in nextjs, we need to add a next/babel presets, no ? (like https://github.com/zeit/next.js/blob/canary/examples/with-styled-jsx-scss/.babelrc) Otherwise, it shows an error.

    Reply
  • Updated body style to hide overflow-x
    Updated body style to hide overflow-x

    May 24, 2018

    Having scroll x on mobile isn't the best experience.. I added overflow-x: hidden to quick fix.

    Reply
  • The .page-transition-exit and .page-transition-exit-active class are not applied when unmounting a page
    The .page-transition-exit and .page-transition-exit-active class are not applied when unmounting a page

    Oct 10, 2019

    The .page-transition-exit and .page-transition-exit-active class are not applied when unmounting a page

    `import React from 'react'; import App from 'next/app'; import {useRouter} from 'next/router'; import { PageTransition } from 'next-page-transitions' import { Provider } from 'react-redux'; import { initializeStore } from './store' import {MainLayout} from "../components/layouts/MainLayout"; import {fetchApi} from "../services/fetchApi"; import {Div100Vh} from "../components/Div100Vh";

    import '../sass/styles.scss';

    const TIMEOUT = 2000;

    export const withRedux = ( PageComponent, { ssr = true, Layout = MainLayout, fetchURLLayout = '/layouts', classes = []} = {}) => {

    const WithRedux = ({ initialReduxState, ...props }) => { const router = useRouter();

    const store = getOrInitializeStore(initialReduxState);
    
    return (
        <Provider store={store}>
            <PageTransition
                timeout={TIMEOUT}
                classNames='page-transition'
            >
    
                <Layout {...props.data} className={classes.join(' ')} key={router.route}>
                    <Div100Vh>
                        <PageComponent key={router.route} {...props}/>
                    </Div100Vh>
                </Layout>
    
            </PageTransition>
        </Provider>
    )
    

    };

    if (process.env.NODE_ENV !== 'production') { const isAppHoc = PageComponent === App || PageComponent.prototype instanceof App; if (isAppHoc) { throw new Error('The withRedux HOC only works with PageComponents') } }

    if (process.env.NODE_ENV !== 'production') { const displayName = PageComponent.displayName || PageComponent.name || 'Component';

    WithRedux.displayName = `withRedux(${displayName})`
    

    }

    if (ssr || PageComponent.getInitialProps) { WithRedux.getInitialProps = async context => { const reduxStore = getOrInitializeStore();

        context.reduxStore = reduxStore;
    
        let pageProps =
            typeof PageComponent.getInitialProps === 'function'
                ? await PageComponent.getInitialProps(context)
                : {};
    
        if (fetchURLLayout) {
            return fetchApi(`${fetchURLLayout}`).then(res => ({
                    ...pageProps,
                    data: res,
                    initialReduxState: reduxStore.getState()
                })
            );
        } else {
            return {
                ...pageProps,
                initialReduxState: reduxStore.getState()
            }
        }
    }
    

    }

    return WithRedux };

    let reduxStore;

    const getOrInitializeStore = initialState => { if (typeof window === 'undefined') { return initializeStore(initialState) }

    if (!reduxStore) { reduxStore = initializeStore(initialState) }

    return reduxStore };`

    css `$animation-duration: 2000ms;

    @media screen and (min-width: 320px) { .page-transition-enter { opacity: 0; transform: translate3d(0, 100px, 0); } .page-transition-enter-active { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity $animation-duration, transform $animation-duration; } .page-transition-exit { opacity: 1; } .page-transition-exit-active { opacity: 0; transition: opacity $animation-duration; } .loading-indicator-appear, .loading-indicator-enter { opacity: 0; } .loading-indicator-appear-active, .loading-indicator-enter-active { opacity: 1; transition: opacity $animation-duration; } }`

    Reply
  • Usage instructions
    Usage instructions

    Aug 21, 2018

    Would be great to have some instructions on how to use this, demo looks super cool!

    Reply
  • Fix broken link to Github repo
    Fix broken link to Github repo

    Apr 28, 2018

                                                                                                                                                                                                           
    Reply
  • Fixed typo
    Fixed typo

    Apr 27, 2018

                                                                                                                                                                                                           
    Reply
  • Corrected link to repo
    Corrected link to repo

    Apr 26, 2018

                                                                                                                                                                                                           
    Reply
  • Live demo is down
    Live demo is down

    May 14, 2019

    Hi! The demo page is broken (404). Could you make it view-able again?

    Reply
  • Demo is down :(
    Demo is down :(

    Nov 7, 2019

                                                                                                                                                                                                           
    Reply