├── .gitignore ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-ssr.js ├── package.json ├── src ├── components │ ├── Layout.js │ └── Nav.js ├── pages │ ├── 404.js │ ├── animated.js │ ├── index.js │ └── regular.js └── styles │ └── style.css └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 3 | node_modules 4 | .cache/ 5 | # Build directory 6 | public/ 7 | .DS_Store 8 | yarn-error.log 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Ryan Wiemer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gatsby-using-page-transitions 2 | 3 | Gatsby example site using page transitions 4 | 5 | - This example uses [`Framer Motion`](https://www.framer.com/motion/) for a default page transition as well as more complex individual animations that can be triggered when the page is mounted. 6 | - The Layout component is manually wrapped around pages via `wrapPageElement` in `gatsby-browser.js`. Alternatively [gatsby-plugin-layout](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-layout) could be used to achieve a similar result. 7 | - The scroll position is manually set in `gatsby-browser.js` in order to delay scrolling to the top of the page until after the default page transition. 8 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Layout from "./src/components/Layout"; 3 | 4 | const transitionDelay = 500; 5 | 6 | export const wrapPageElement = ({ element, props }) => { 7 | return {element}; 8 | }; 9 | 10 | export const shouldUpdateScroll = ({ 11 | routerProps: { location }, 12 | getSavedScrollPosition 13 | }) => { 14 | if (location.action === "PUSH") { 15 | window.setTimeout(() => window.scrollTo(0, 0), transitionDelay); 16 | } else { 17 | const savedPosition = getSavedScrollPosition(location); 18 | window.setTimeout( 19 | () => window.scrollTo(...(savedPosition || [0, 0])), 20 | transitionDelay 21 | ); 22 | } 23 | return false; 24 | }; 25 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [] 3 | }; 4 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Layout from "./src/components/Layout"; 3 | 4 | export const wrapPageElement = ({ element, props }) => { 5 | return {element}; 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-using-page-transitions", 3 | "description": "Gatsby example site using page transitions", 4 | "version": "1.0.1", 5 | "author": "Ryan Wiemer ", 6 | "dependencies": { 7 | "framer-motion": "^2.6.13", 8 | "gatsby": "^2.24.57", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1" 11 | }, 12 | "keywords": [ 13 | "gatsby" 14 | ], 15 | "license": "MIT", 16 | "main": "n/a", 17 | "scripts": { 18 | "build": "gatsby build", 19 | "develop": "gatsby develop", 20 | "format": "prettier --trailing-comma es5 --no-semi --single-quote --write 'src/**/*.js'", 21 | "clean": "gatsby clean" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/components/Layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { motion, AnimatePresence } from 'framer-motion' 3 | import Nav from '../components/Nav' 4 | import '../styles/style.css' 5 | 6 | const duration = 0.5 7 | 8 | const variants = { 9 | initial: { 10 | opacity: 0, 11 | }, 12 | enter: { 13 | opacity: 1, 14 | transition: { 15 | duration: duration, 16 | delay: duration, 17 | when: 'beforeChildren', 18 | }, 19 | }, 20 | exit: { 21 | opacity: 0, 22 | transition: { duration: duration }, 23 | }, 24 | } 25 | 26 | const Layout = ({ children, location }) => ( 27 | <> 28 |