27 | {props.children}
28 |
29 | )
30 | }
31 |
32 | export default class TransitionPortal extends Component {
33 | constructor() {
34 | super()
35 | this.el =
36 | typeof document !== `undefined`
37 | ? document.createElement('section')
38 | : false
39 | }
40 |
41 | componentDidMount = () => {
42 | portalRoot && portalRoot.appendChild(this.el)
43 | }
44 |
45 | componentWillUnmount = () => {
46 | portalRoot && portalRoot.removeChild(this.el)
47 | }
48 |
49 | render() {
50 | return this.el && portalRoot
51 | ? ReactDOM.createPortal(
52 | <>
53 | {portalRoot && (
54 |
11 | (
22 |
47 | )
48 |
49 | Layout.propTypes = {
50 | children: PropTypes.node.isRequired,
51 | }
52 |
53 | export default Layout
54 |
--------------------------------------------------------------------------------
/example/src/components/Poses/ExamplePose.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import posed from 'react-pose'
3 | import TransitionLink, { TransitionState } from 'gatsby-plugin-transition-link'
4 |
5 | const Box = posed.div({
6 | hidden: { opacity: 0 },
7 | visible: { opacity: 1 },
8 | })
9 |
10 | export default class Example extends React.Component {
11 | render() {
12 | const { props } = this
13 |
14 | return (
15 | <>
16 |
23 |
30 |
31 |
32 |
44 | )}
45 | />
46 |
41 | {children}
42 |
43 |
58 |
59 | {/* pass transition state to page/template */}
60 | {// injectPageProps is a plugin option
61 | injectPageProps
62 | ? cloneElement(children, {
63 | ...transitionState,
64 | })
65 | : children}
66 |
67 |
68 | )
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/context/InternalProvider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropTypes from 'prop-types'
3 | import { Provider } from './createTransitionContext'
4 | import getPagesPromises from '../utils/getPagesPromises'
5 |
6 | class InternalProvider extends Component {
7 | constructor(props) {
8 | super(props)
9 | const prefersReducedMotionSetting =
10 | typeof window !== `undefined` &&
11 | window.matchMedia('(prefers-reduced-motion: reduce)')
12 |
13 | const prefersReducedMotion = prefersReducedMotionSetting
14 |
15 | if (
16 | prefersReducedMotionSetting.matches &&
17 | process.env.NODE_ENV === `development`
18 | ) {
19 | console.warn(
20 | `[gatsby-plugin-transition-link] Warning! prefers-reduced-motion is activated via your OS settings. This means TransitionLink animations will not run.`
21 | )
22 | }
23 |
24 | this.state = {
25 | inTransition: false,
26 | disableAnimation: prefersReducedMotion.matches,
27 | // event
28 | e: false,
29 | // exit
30 | exitDelay: 0,
31 | exitLength: 0,
32 | exitState: {},
33 | exitProps: {},
34 | exitTrigger: false,
35 | // entry
36 | entryDelay: 0,
37 | entryLength: 0,
38 | entryState: {},
39 | entryProps: {},
40 | entryTrigger: false,
41 | // state updates
42 | updateContext: obj => this.setState(obj),
43 | }
44 |
45 | if (
46 | prefersReducedMotion &&
47 | typeof prefersReducedMotion.addEventListener === `function`
48 | ) {
49 | prefersReducedMotion.addEventListener('change', () => {
50 | this.setState({
51 | disableAnimation: prefersReducedMotion.matches,
52 | })
53 | })
54 | } else if (
55 | prefersReducedMotion &&
56 | typeof prefersReducedMotion.addListener === `function`
57 | ) {
58 | prefersReducedMotion.addListener(() => {
59 | this.setState({
60 | disableAnimation: prefersReducedMotion.matches,
61 | })
62 | })
63 | }
64 | }
65 |
66 | componentDidMount() {
67 | this.state.updateContext(getPagesPromises())
68 | }
69 |
70 | render() {
71 | return Hi peoples
64 |Check out these sick transitions.
65 |69 |
73 |
77 |
81 |
100 |
115 |
119 | Go to page 2 with gatsby-link 120 |
(this.transitionCover = n)}
125 | style={{
126 | position: 'fixed',
127 | background: '#4b2571',
128 | top: 0,
129 | left: 0,
130 | width: '100vw',
131 | height: '100vh',
132 | transform: 'translateY(100%)',
133 | }}
134 | />
135 |
136 |
137 | )
138 | }
139 | }
140 |
141 | export default Index
142 |
--------------------------------------------------------------------------------
/src/components/TransitionHandler.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Transition, TransitionGroup } from 'react-transition-group'
3 | import { Location } from '@reach/router'
4 |
5 | import TransitionRenderer from './TransitionRenderer'
6 | import delayTransitionRender from './delayTransitionRender'
7 | import { Consumer } from '../context/createTransitionContext'
8 | import { onEnter } from '../functions/onEnter'
9 | import { onExit } from '../functions/onExit'
10 | import { getMs } from '../utils/secondsMs'
11 |
12 | import '../style.css'
13 |
14 | const DelayedTransition = delayTransitionRender(Transition)
15 | export default class TransitionHandler extends Component {
16 | render() {
17 | const { props } = this
18 | const { children, injectPageProps = true } = props
19 |
20 | return (
21 |
22 | {({
23 | exitDelay,
24 | exitLength,
25 | exitState,
26 | entryDelay,
27 | entryLength,
28 | entryState,
29 | entryTrigger,
30 | entryProps,
31 | exitTrigger,
32 | exitProps,
33 | inTransition,
34 | updateContext,
35 | triggerResolve,
36 | appearAfter,
37 | preventScrollJump,
38 | hash,
39 | e,
40 | }) => {
41 | return (
42 |
43 | {({ location }) => {
44 | const {
45 | action,
46 | pathname,
47 | key: locationKey,
48 | } = location
49 |
50 | return (
51 |
162 | )
163 | }}
164 |
165 | )
166 | }
167 | }
168 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | (this.layoutWrapper = n)}>
72 |
79 |
184 |
185 |
186 |
52 |
53 |
61 | !!node &&
62 | !window.__tl_back_button_pressed &&
63 | onEnter({
64 | node,
65 | action,
66 | inTransition,
67 | entryTrigger,
68 | entryProps,
69 | exitProps,
70 | pathname,
71 | updateContext,
72 | triggerResolve,
73 | preventScrollJump,
74 | hash,
75 | locationKey,
76 | appearAfter: getMs(
77 | appearAfter
78 | ),
79 | e,
80 | })
81 | }
82 | onExit={node =>
83 | !!node &&
84 | !window.__tl_back_button_pressed &&
85 | onExit({
86 | node,
87 | inTransition,
88 | exitTrigger,
89 | entryProps,
90 | exitProps,
91 | triggerResolve,
92 | e,
93 | })
94 | }>
95 | {transitionStatus => {
96 | const mount =
97 | transitionStatus ===
98 | 'entering' ||
99 | transitionStatus ===
100 | 'entered'
101 |
102 | const states = {
103 | entry: {
104 | state: entryState,
105 | delay: entryDelay,
106 | length: entryLength,
107 | },
108 | exit: {
109 | state: exitState,
110 | delay: exitDelay,
111 | length: exitLength,
112 | },
113 | }
114 |
115 | const current = mount
116 | ? states.entry
117 | : states.exit
118 |
119 | const transitionState = {
120 | transitionStatus,
121 | current,
122 | mount,
123 | ...states,
124 | }
125 |
126 | const exitZindex =
127 | exitProps.zIndex || 0
128 | const entryZindex =
129 | entryProps.zIndex || 1
130 |
131 | return (
132 |
157 |
158 |
159 | )
160 | }}
161 |
2 |
3 | 
4 |
5 |
7 | Gatsby's default starter 8 |
9 | 10 | Kick off your project with this default boilerplate. This barebones starter ships with the main Gatsby configuration files you might need. 11 | 12 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 13 | 14 | ## 🚀 Quick start 15 | 16 | 1. **Install the Gatsby CLI.** 17 | 18 | The Gatsby CLI helps you create new sites using Gatsby starters (like this one!) 19 | 20 | ```sh 21 | # install the Gatsby CLI globally 22 | npm install -g gatsby-cli 23 | ``` 24 | 25 | 2. **Create a Gatsby site.** 26 | 27 | Use the Gatsby CLI to create a new site, specifying the default starter. 28 | 29 | ```sh 30 | # create a new Gatsby site using the default starter 31 | gatsby new my-default-starter 32 | ``` 33 | 34 | 3. **Start developing.** 35 | 36 | Navigate into your new site’s directory and start it up. 37 | 38 | ```sh 39 | cd my-default-starter/ 40 | gatsby develop 41 | ``` 42 | 43 | 4. **Open the source code and start editing!** 44 | 45 | Your site is now running at `http://localhost:8000`! 46 | 47 | *Note: You'll also see a second link: `http://localhost:8000/___graphql`. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql).* 48 | 49 | Open the the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 50 | 51 | ## 🧐 What's inside? 52 | 53 | A quick look at the top-level files and directories you'll see in a Gatsby project. 54 | 55 | . 56 | ├── node_modules 57 | ├── src 58 | ├── .gitignore 59 | ├── .prettierrc 60 | ├── gatsby-browser.js 61 | ├── gatsby-config.js 62 | ├── gatsby-node.js 63 | ├── gatsby-ssr.js 64 | ├── LICENSE 65 | ├── package-lock.json 66 | ├── package.json 67 | ├── README.md 68 | └── yarn.lock 69 | 70 | 1. **`/node_modules`**: The directory where all of the modules of code that your project depends on (npm packages) are automatically installed. 71 | 72 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser), like your site header, or a page template. “Src” is a convention for “source code”. 73 | 74 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 75 | 76 | 4. **`.prettierrc`**: This is a configuration file for a tool called [Prettier](https://prettier.io/), which is a tool to help keep the formatting of your code consistent. 77 | 78 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 79 | 80 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 81 | 82 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 83 | 84 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 85 | 86 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 87 | 88 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (You won’t change this file directly). 89 | 90 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 91 | 92 | 12. **`README.md`**: A text file containing useful reference information about your project. 93 | 94 | 13. **`yarn.lock`**: [Yarn](https://yarnpkg.com/) is a package manager alternative to npm. You can use either yarn or npm, though all of the Gatsby docs reference npm. This file serves essentially the same purpose as `package-lock.json`, just for a different package management system. 95 | 96 | ## 🎓 Learning Gatsby 97 | 98 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 99 | 100 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 101 | 102 | - **To dive straight into code samples head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the “Guides”, API reference, and “Advanced Tutorials” sections in the sidebar. 103 | 104 | ## 💫 Deploy 105 | 106 | [](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 107 | -------------------------------------------------------------------------------- /example/src/pages/page-2.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import TransitionLink, { TransitionPortal } from 'gatsby-plugin-transition-link' 3 | import AniLink from 'gatsby-plugin-transition-link/AniLink' 4 | import Layout from '../components/layout' 5 | import gsap from 'gsap' 6 | 7 | import DisplayState from '../components/DisplayState' 8 | 9 | export default class SecondPage extends Component { 10 | constructor(props) { 11 | super(props) 12 | 13 | this.layoutContents = React.createRef() 14 | this.layoutWrapper = React.createRef() 15 | this.transitionCover = React.createRef() 16 | 17 | this.exitHorizontal = this.exitHorizontal.bind(this) 18 | } 19 | 20 | componentDidMount() { 21 | const { 22 | entry: { state }, 23 | } = this.props 24 | 25 | return state.animation === 'fromBottom' 26 | ? gsap.fromTo( 27 | this.layoutContents, 28 | { y: '10%' }, 29 | { 30 | y: '0%', 31 | duration: 1, 32 | } 33 | ) 34 | : null 35 | } 36 | 37 | exitHorizontal = ({ length }, direction) => { 38 | const seconds = length 39 | 40 | const directionTo = direction === 'left' ? '-100%' : '100%' 41 | const directionFrom = direction === 'left' ? '100%' : '-100%' 42 | 43 | return gsap.timeline() 44 | .set(this.transitionCover, { x: directionFrom, display: 'block' }) 45 | .to(this.transitionCover, { 46 | x: '0%', 47 | ease: "power1.easeInOut", 48 | duration: seconds / 2, 49 | }) 50 | .set(this.layoutWrapper, { opacity: 0 }) 51 | .to(this.transitionCover, { 52 | x: directionTo, 53 | ease: "power1.easeInOut", 54 | duration: seconds / 2, 55 | }) 56 | } 57 | 58 | message = message => { 59 | console.log(message) 60 | } 61 | 62 | render() { 63 | const { 64 | entry: { state: entryState }, 65 | } = this.props 66 | 67 | console.log(this.props.location.state) 68 | 69 | return ( 70 | <> 71 | (this.layoutContents = n)}>
80 | Go home normally
88 |
89 |
90 | Fade home
91 |
92 |
93 |
108 | Go home with a cover left background image
109 |
110 |
111 | this.exitHorizontal(exit, 'left'),
116 | }}
117 | entry={{
118 | delay: 1,
119 | state: { pass: 'Whatever you want', to: 'the next page' },
120 | }}
121 | >
122 | Go back to the homepage that way{' '}
123 |
124 | 👈
125 |
126 |
127 |
128 | this.exitHorizontal(exit, 'right'),
133 | }}
134 | entry={{
135 | delay: 1,
136 | state: { pass: 'Whatever you want', to: 'the next page' },
137 | }}
138 | >
139 | Go back to the homepage that way{' '}
140 |
141 | 👉
142 |
143 |
144 |
145 | console.log('Link clicked')}
148 | >
149 | Go home normally (with an `onClick`)
150 |
151 |
161 | this.exitHorizontal(exit, 'right'),
170 | }}
171 | entry={{
172 | delay: 1,
173 | state: { pass: 'Whatever you want', to: 'the next page' },
174 | }}
175 | >
176 | Go back to the homepage that way{' '}
177 |
178 | 👉
179 |
180 |
181 |
182 |
183 | 81 | Hi from the second page{' '} 82 | {entryState && entryState.layoutTheme === 'dark' 83 | ? `(dark state)` 84 | : null} 85 |
86 |There are only 2 pages here but there are 4 transitions!
87 |89 |
93 |
111 |
128 |
145 |
162 | This is a tall section to show what transitions look like when 163 | you're scrolled 164 |
165 | (this.transitionCover = n)}
188 | style={{
189 | position: 'fixed',
190 | background: '#4b2571',
191 | top: 0,
192 | left: 0,
193 | width: '100vw',
194 | height: '100vh',
195 | display: 'none',
196 | }}
197 | />
198 |
199 |
200 | )
201 | }
202 | }
203 |
--------------------------------------------------------------------------------
/example/src/components/layout.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | -ms-text-size-adjust: 100%;
4 | -webkit-text-size-adjust: 100%;
5 | }
6 | body {
7 | margin: 0;
8 | }
9 | article,
10 | aside,
11 | details,
12 | figcaption,
13 | figure,
14 | footer,
15 | header,
16 | main,
17 | menu,
18 | nav,
19 | section,
20 | summary {
21 | display: block;
22 | }
23 | audio,
24 | canvas,
25 | progress,
26 | video {
27 | display: inline-block;
28 | }
29 | audio:not([controls]) {
30 | display: none;
31 | height: 0;
32 | }
33 | progress {
34 | vertical-align: baseline;
35 | }
36 | [hidden],
37 | template {
38 | display: none;
39 | }
40 | a {
41 | background-color: transparent;
42 | -webkit-text-decoration-skip: objects;
43 | }
44 | a:active,
45 | a:hover {
46 | outline-width: 0;
47 | }
48 | abbr[title] {
49 | border-bottom: none;
50 | text-decoration: underline;
51 | text-decoration: underline dotted;
52 | }
53 | b,
54 | strong {
55 | font-weight: inherit;
56 | font-weight: bolder;
57 | }
58 | dfn {
59 | font-style: italic;
60 | }
61 | h1 {
62 | font-size: 2em;
63 | margin: 0.67em 0;
64 | }
65 | mark {
66 | background-color: #ff0;
67 | color: #000;
68 | }
69 | small {
70 | font-size: 80%;
71 | }
72 | sub,
73 | sup {
74 | font-size: 75%;
75 | line-height: 0;
76 | position: relative;
77 | vertical-align: baseline;
78 | }
79 | sub {
80 | bottom: -0.25em;
81 | }
82 | sup {
83 | top: -0.5em;
84 | }
85 | img {
86 | border-style: none;
87 | }
88 | svg:not(:root) {
89 | overflow: hidden;
90 | }
91 | code,
92 | kbd,
93 | pre,
94 | samp {
95 | font-family: monospace, monospace;
96 | font-size: 1em;
97 | }
98 | figure {
99 | margin: 1em 40px;
100 | }
101 | hr {
102 | box-sizing: content-box;
103 | height: 0;
104 | overflow: visible;
105 | }
106 | button,
107 | input,
108 | optgroup,
109 | select,
110 | textarea {
111 | font: inherit;
112 | margin: 0;
113 | }
114 | optgroup {
115 | font-weight: 700;
116 | }
117 | button,
118 | input {
119 | overflow: visible;
120 | }
121 | button,
122 | select {
123 | text-transform: none;
124 | }
125 | [type='reset'],
126 | [type='submit'],
127 | button,
128 | html [type='button'] {
129 | -webkit-appearance: button;
130 | }
131 | [type='button']::-moz-focus-inner,
132 | [type='reset']::-moz-focus-inner,
133 | [type='submit']::-moz-focus-inner,
134 | button::-moz-focus-inner {
135 | border-style: none;
136 | padding: 0;
137 | }
138 | [type='button']:-moz-focusring,
139 | [type='reset']:-moz-focusring,
140 | [type='submit']:-moz-focusring,
141 | button:-moz-focusring {
142 | outline: 1px dotted ButtonText;
143 | }
144 | fieldset {
145 | border: 1px solid silver;
146 | margin: 0 2px;
147 | padding: 0.35em 0.625em 0.75em;
148 | }
149 | legend {
150 | box-sizing: border-box;
151 | color: inherit;
152 | display: table;
153 | max-width: 100%;
154 | padding: 0;
155 | white-space: normal;
156 | }
157 | textarea {
158 | overflow: auto;
159 | }
160 | [type='checkbox'],
161 | [type='radio'] {
162 | box-sizing: border-box;
163 | padding: 0;
164 | }
165 | [type='number']::-webkit-inner-spin-button,
166 | [type='number']::-webkit-outer-spin-button {
167 | height: auto;
168 | }
169 | [type='search'] {
170 | -webkit-appearance: textfield;
171 | outline-offset: -2px;
172 | }
173 | [type='search']::-webkit-search-cancel-button,
174 | [type='search']::-webkit-search-decoration {
175 | -webkit-appearance: none;
176 | }
177 | ::-webkit-input-placeholder {
178 | color: inherit;
179 | opacity: 0.54;
180 | }
181 | ::-webkit-file-upload-button {
182 | -webkit-appearance: button;
183 | font: inherit;
184 | }
185 | html {
186 | font: 112.5%/1.45em georgia, serif;
187 | box-sizing: border-box;
188 | overflow-y: scroll;
189 | }
190 | * {
191 | box-sizing: inherit;
192 | }
193 | *:before {
194 | box-sizing: inherit;
195 | }
196 | *:after {
197 | box-sizing: inherit;
198 | }
199 | body {
200 | color: hsla(0, 0%, 0%, 0.8);
201 | font-family: georgia, serif;
202 | font-weight: normal;
203 | word-wrap: break-word;
204 | font-kerning: normal;
205 | -moz-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
206 | -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
207 | -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
208 | font-feature-settings: 'kern', 'liga', 'clig', 'calt';
209 | }
210 | img {
211 | max-width: 100%;
212 | margin-left: 0;
213 | margin-right: 0;
214 | margin-top: 0;
215 | padding-bottom: 0;
216 | padding-left: 0;
217 | padding-right: 0;
218 | padding-top: 0;
219 | margin-bottom: 1.45rem;
220 | }
221 | h1 {
222 | margin-left: 0;
223 | margin-right: 0;
224 | margin-top: 0;
225 | padding-bottom: 0;
226 | padding-left: 0;
227 | padding-right: 0;
228 | padding-top: 0;
229 | margin-bottom: 1.45rem;
230 | color: inherit;
231 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
232 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
233 | font-weight: bold;
234 | text-rendering: optimizeLegibility;
235 | font-size: 2.25rem;
236 | line-height: 1.1;
237 | }
238 | h2 {
239 | margin-left: 0;
240 | margin-right: 0;
241 | margin-top: 0;
242 | padding-bottom: 0;
243 | padding-left: 0;
244 | padding-right: 0;
245 | padding-top: 0;
246 | margin-bottom: 1.45rem;
247 | color: inherit;
248 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
249 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
250 | font-weight: bold;
251 | text-rendering: optimizeLegibility;
252 | font-size: 1.62671rem;
253 | line-height: 1.1;
254 | }
255 | h3 {
256 | margin-left: 0;
257 | margin-right: 0;
258 | margin-top: 0;
259 | padding-bottom: 0;
260 | padding-left: 0;
261 | padding-right: 0;
262 | padding-top: 0;
263 | margin-bottom: 1.45rem;
264 | color: inherit;
265 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
266 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
267 | font-weight: bold;
268 | text-rendering: optimizeLegibility;
269 | font-size: 1.38316rem;
270 | line-height: 1.1;
271 | }
272 | h4 {
273 | margin-left: 0;
274 | margin-right: 0;
275 | margin-top: 0;
276 | padding-bottom: 0;
277 | padding-left: 0;
278 | padding-right: 0;
279 | padding-top: 0;
280 | margin-bottom: 1.45rem;
281 | color: inherit;
282 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
283 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
284 | font-weight: bold;
285 | text-rendering: optimizeLegibility;
286 | font-size: 1rem;
287 | line-height: 1.1;
288 | }
289 | h5 {
290 | margin-left: 0;
291 | margin-right: 0;
292 | margin-top: 0;
293 | padding-bottom: 0;
294 | padding-left: 0;
295 | padding-right: 0;
296 | padding-top: 0;
297 | margin-bottom: 1.45rem;
298 | color: inherit;
299 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
300 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
301 | font-weight: bold;
302 | text-rendering: optimizeLegibility;
303 | font-size: 0.85028rem;
304 | line-height: 1.1;
305 | }
306 | h6 {
307 | margin-left: 0;
308 | margin-right: 0;
309 | margin-top: 0;
310 | padding-bottom: 0;
311 | padding-left: 0;
312 | padding-right: 0;
313 | padding-top: 0;
314 | margin-bottom: 1.45rem;
315 | color: inherit;
316 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
317 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
318 | font-weight: bold;
319 | text-rendering: optimizeLegibility;
320 | font-size: 0.78405rem;
321 | line-height: 1.1;
322 | }
323 | hgroup {
324 | margin-left: 0;
325 | margin-right: 0;
326 | margin-top: 0;
327 | padding-bottom: 0;
328 | padding-left: 0;
329 | padding-right: 0;
330 | padding-top: 0;
331 | margin-bottom: 1.45rem;
332 | }
333 | ul {
334 | margin-left: 1.45rem;
335 | margin-right: 0;
336 | margin-top: 0;
337 | padding-bottom: 0;
338 | padding-left: 0;
339 | padding-right: 0;
340 | padding-top: 0;
341 | margin-bottom: 1.45rem;
342 | list-style-position: outside;
343 | list-style-image: none;
344 | }
345 | ol {
346 | margin-left: 1.45rem;
347 | margin-right: 0;
348 | margin-top: 0;
349 | padding-bottom: 0;
350 | padding-left: 0;
351 | padding-right: 0;
352 | padding-top: 0;
353 | margin-bottom: 1.45rem;
354 | list-style-position: outside;
355 | list-style-image: none;
356 | }
357 | dl {
358 | margin-left: 0;
359 | margin-right: 0;
360 | margin-top: 0;
361 | padding-bottom: 0;
362 | padding-left: 0;
363 | padding-right: 0;
364 | padding-top: 0;
365 | margin-bottom: 1.45rem;
366 | }
367 | dd {
368 | margin-left: 0;
369 | margin-right: 0;
370 | margin-top: 0;
371 | padding-bottom: 0;
372 | padding-left: 0;
373 | padding-right: 0;
374 | padding-top: 0;
375 | margin-bottom: 1.45rem;
376 | }
377 | p {
378 | margin-left: 0;
379 | margin-right: 0;
380 | margin-top: 0;
381 | padding-bottom: 0;
382 | padding-left: 0;
383 | padding-right: 0;
384 | padding-top: 0;
385 | margin-bottom: 1.45rem;
386 | }
387 | figure {
388 | margin-left: 0;
389 | margin-right: 0;
390 | margin-top: 0;
391 | padding-bottom: 0;
392 | padding-left: 0;
393 | padding-right: 0;
394 | padding-top: 0;
395 | margin-bottom: 1.45rem;
396 | }
397 | pre {
398 | margin-left: 0;
399 | margin-right: 0;
400 | margin-top: 0;
401 | padding-bottom: 0;
402 | padding-left: 0;
403 | padding-right: 0;
404 | padding-top: 0;
405 | margin-bottom: 1.45rem;
406 | font-size: 0.85rem;
407 | line-height: 1.42;
408 | background: hsla(0, 0%, 0%, 0.04);
409 | border-radius: 3px;
410 | overflow: auto;
411 | word-wrap: normal;
412 | padding: 1.45rem;
413 | }
414 | table {
415 | margin-left: 0;
416 | margin-right: 0;
417 | margin-top: 0;
418 | padding-bottom: 0;
419 | padding-left: 0;
420 | padding-right: 0;
421 | padding-top: 0;
422 | margin-bottom: 1.45rem;
423 | font-size: 1rem;
424 | line-height: 1.45rem;
425 | border-collapse: collapse;
426 | width: 100%;
427 | }
428 | fieldset {
429 | margin-left: 0;
430 | margin-right: 0;
431 | margin-top: 0;
432 | padding-bottom: 0;
433 | padding-left: 0;
434 | padding-right: 0;
435 | padding-top: 0;
436 | margin-bottom: 1.45rem;
437 | }
438 | blockquote {
439 | margin-left: 1.45rem;
440 | margin-right: 1.45rem;
441 | margin-top: 0;
442 | padding-bottom: 0;
443 | padding-left: 0;
444 | padding-right: 0;
445 | padding-top: 0;
446 | margin-bottom: 1.45rem;
447 | }
448 | form {
449 | margin-left: 0;
450 | margin-right: 0;
451 | margin-top: 0;
452 | padding-bottom: 0;
453 | padding-left: 0;
454 | padding-right: 0;
455 | padding-top: 0;
456 | margin-bottom: 1.45rem;
457 | }
458 | noscript {
459 | margin-left: 0;
460 | margin-right: 0;
461 | margin-top: 0;
462 | padding-bottom: 0;
463 | padding-left: 0;
464 | padding-right: 0;
465 | padding-top: 0;
466 | margin-bottom: 1.45rem;
467 | }
468 | iframe {
469 | margin-left: 0;
470 | margin-right: 0;
471 | margin-top: 0;
472 | padding-bottom: 0;
473 | padding-left: 0;
474 | padding-right: 0;
475 | padding-top: 0;
476 | margin-bottom: 1.45rem;
477 | }
478 | hr {
479 | margin-left: 0;
480 | margin-right: 0;
481 | margin-top: 0;
482 | padding-bottom: 0;
483 | padding-left: 0;
484 | padding-right: 0;
485 | padding-top: 0;
486 | margin-bottom: calc(1.45rem - 1px);
487 | background: hsla(0, 0%, 0%, 0.2);
488 | border: none;
489 | height: 1px;
490 | }
491 | address {
492 | margin-left: 0;
493 | margin-right: 0;
494 | margin-top: 0;
495 | padding-bottom: 0;
496 | padding-left: 0;
497 | padding-right: 0;
498 | padding-top: 0;
499 | margin-bottom: 1.45rem;
500 | }
501 | b {
502 | font-weight: bold;
503 | }
504 | strong {
505 | font-weight: bold;
506 | }
507 | dt {
508 | font-weight: bold;
509 | }
510 | th {
511 | font-weight: bold;
512 | }
513 | li {
514 | margin-bottom: calc(1.45rem / 2);
515 | }
516 | ol li {
517 | padding-left: 0;
518 | }
519 | ul li {
520 | padding-left: 0;
521 | }
522 | li > ol {
523 | margin-left: 1.45rem;
524 | margin-bottom: calc(1.45rem / 2);
525 | margin-top: calc(1.45rem / 2);
526 | }
527 | li > ul {
528 | margin-left: 1.45rem;
529 | margin-bottom: calc(1.45rem / 2);
530 | margin-top: calc(1.45rem / 2);
531 | }
532 | blockquote *:last-child {
533 | margin-bottom: 0;
534 | }
535 | li *:last-child {
536 | margin-bottom: 0;
537 | }
538 | p *:last-child {
539 | margin-bottom: 0;
540 | }
541 | li > p {
542 | margin-bottom: calc(1.45rem / 2);
543 | }
544 | code {
545 | font-size: 0.85rem;
546 | line-height: 1.45rem;
547 | }
548 | kbd {
549 | font-size: 0.85rem;
550 | line-height: 1.45rem;
551 | }
552 | samp {
553 | font-size: 0.85rem;
554 | line-height: 1.45rem;
555 | }
556 | abbr {
557 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
558 | cursor: help;
559 | }
560 | acronym {
561 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
562 | cursor: help;
563 | }
564 | abbr[title] {
565 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
566 | cursor: help;
567 | text-decoration: none;
568 | }
569 | thead {
570 | text-align: left;
571 | }
572 | td,
573 | th {
574 | text-align: left;
575 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
576 | font-feature-settings: 'tnum';
577 | -moz-font-feature-settings: 'tnum';
578 | -ms-font-feature-settings: 'tnum';
579 | -webkit-font-feature-settings: 'tnum';
580 | padding-left: 0.96667rem;
581 | padding-right: 0.96667rem;
582 | padding-top: 0.725rem;
583 | padding-bottom: calc(0.725rem - 1px);
584 | }
585 | th:first-child,
586 | td:first-child {
587 | padding-left: 0;
588 | }
589 | th:last-child,
590 | td:last-child {
591 | padding-right: 0;
592 | }
593 | tt,
594 | code {
595 | background-color: hsla(0, 0%, 0%, 0.04);
596 | border-radius: 3px;
597 | font-family: 'SFMono-Regular', Consolas, 'Roboto Mono', 'Droid Sans Mono',
598 | 'Liberation Mono', Menlo, Courier, monospace;
599 | padding: 0;
600 | padding-top: 0.2em;
601 | padding-bottom: 0.2em;
602 | }
603 | pre code {
604 | background: none;
605 | line-height: 1.42;
606 | }
607 | code:before,
608 | code:after,
609 | tt:before,
610 | tt:after {
611 | letter-spacing: -0.2em;
612 | content: ' ';
613 | }
614 | pre code:before,
615 | pre code:after,
616 | pre tt:before,
617 | pre tt:after {
618 | content: '';
619 | }
620 | @media only screen and (max-width: 480px) {
621 | html {
622 | font-size: 100%;
623 | }
624 | }
625 |
626 | .layout-wrapper {
627 | min-height: 100vh;
628 | display: flex;
629 | }
630 |
631 | .layout-inner {
632 | width: 100%;
633 | }
634 |
635 | .dark.layout-wrapper .layout-inner {
636 | background: #421d63;
637 | }
638 |
639 | .white.layout-wrapper .layout-inner {
640 | background: white;
641 | }
642 |
643 | .dark.layout-wrapper .layout-inner * {
644 | color: white;
645 | }
646 |
647 | br {
648 | line-height: 3;
649 | }
650 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 | ## [1.20.5](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.20.4...v1.20.5) (2020-10-17)
6 |
7 |
8 |
9 | ## [1.20.4](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.20.2...v1.20.4) (2020-10-17)
10 |
11 |
12 |
13 | ## [1.20.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.20.1...v1.20.2) (2020-06-23)
14 |
15 |
16 | ### Bug Fixes
17 |
18 | * check that window exists before trying to access it ([9544d9a](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/9544d9a))
19 |
20 |
21 |
22 | ## [1.20.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.20.0...v1.20.1) (2020-06-23)
23 |
24 |
25 |
26 | # [1.20.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.18.1...v1.20.0) (2020-06-23)
27 |
28 |
29 | ### Bug Fixes
30 |
31 | * change hash offset from getBoundingClientRect() to offsetTop ([d3c000d](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/d3c000d))
32 | * only show prefers-reduced-motion warning if it's actually set 🤦♂️ ([ac5f15e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/ac5f15e))
33 | * remove buggy createRef usage and use querySelector instead as it's more reliable here.. ([545068f](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/545068f))
34 |
35 |
36 | ### Features
37 |
38 | * add a warning in console during development if prefers-reduced-motion is enabled ([82e9c16](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/82e9c16))
39 |
40 |
41 |
42 | ## [1.19.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.19.1...v1.19.2) (2020-06-22)
43 |
44 |
45 | ### Bug Fixes
46 |
47 | * remove buggy createRef usage and use querySelector instead as it's more reliable here.. ([545068f](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/545068f))
48 |
49 |
50 |
51 | ## [1.19.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.19.0...v1.19.1) (2020-06-22)
52 |
53 |
54 | ### Bug Fixes
55 |
56 | * only show prefers-reduced-motion warning if it's actually set 🤦♂️ ([ac5f15e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/ac5f15e))
57 |
58 |
59 |
60 | # [1.19.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.18.3...v1.19.0) (2020-06-22)
61 |
62 |
63 | ### Features
64 |
65 | * add a warning in console during development if prefers-reduced-motion is enabled ([82e9c16](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/82e9c16))
66 |
67 |
68 |
69 | ## [1.18.3](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.18.2...v1.18.3) (2020-06-22)
70 |
71 |
72 |
73 | ## [1.18.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.18.1...v1.18.2) (2020-06-22)
74 |
75 |
76 | ### Bug Fixes
77 |
78 | * change hash offset from getBoundingClientRect() to offsetTop ([d3c000d](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/d3c000d))
79 |
80 |
81 |
82 | # [1.18.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.8...v1.18.0) (2020-03-06)
83 |
84 |
85 | ### Features
86 |
87 | * add useTriggerTransition hook w/ examples ([8754f38](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/8754f38))
88 |
89 |
90 |
91 | ## [1.17.8](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.7...v1.17.8) (2020-03-05)
92 |
93 |
94 |
95 | ## [1.17.7](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.6...v1.17.7) (2019-12-16)
96 |
97 |
98 | ### Bug Fixes
99 |
100 | * remove manual tracking of transition history and addition o… ([#169](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/169)) ([30632a9](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/30632a9))
101 |
102 |
103 |
104 | ## [1.17.6](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.5...v1.17.6) (2019-12-16)
105 |
106 |
107 | ### Bug Fixes
108 |
109 | * hide the exiting page contents once the cover div is coveri… ([#168](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/168)) ([add955e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/add955e))
110 |
111 |
112 |
113 | ## [1.17.5](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.4...v1.17.5) (2019-12-10)
114 |
115 |
116 | ### Bug Fixes
117 |
118 | * namespace layout global and move layout to wrap page to pre… ([#167](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/167)) ([9387dcd](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/9387dcd))
119 |
120 |
121 |
122 | ## [1.17.4](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.3...v1.17.4) (2019-12-10)
123 |
124 |
125 |
126 | ## [1.17.3](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.2...v1.17.3) (2019-12-09)
127 |
128 |
129 | ### Bug Fixes
130 |
131 | * move provider to root ([#165](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/165)) ([b16a91e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/b16a91e))
132 |
133 |
134 |
135 | ## [1.17.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.1...v1.17.2) (2019-12-09)
136 |
137 |
138 |
139 | ## [1.17.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.17.0...v1.17.1) (2019-12-09)
140 |
141 |
142 | ### Bug Fixes
143 |
144 | * broken paintdrip ([#163](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/163)) ([08a8e9b](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/08a8e9b))
145 |
146 |
147 |
148 | # [1.17.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.16.2...v1.17.0) (2019-12-09)
149 |
150 |
151 | ### Features
152 |
153 | * add option to prevent automatically scrolling to the top o… ([#162](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/162)) ([16d2059](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/16d2059))
154 |
155 |
156 |
157 | ## [1.16.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.16.1...v1.16.2) (2019-11-07)
158 |
159 |
160 | ### Bug Fixes
161 |
162 | * paintdrip timing ([#153](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/153)) ([71c0a7e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/71c0a7e))
163 |
164 |
165 |
166 | ## [1.16.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.16.0...v1.16.1) (2019-11-06)
167 |
168 |
169 | ### Bug Fixes
170 |
171 | * move default injectPageProps option so it gets applied properly ([#151](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/151)) ([a08d61d](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/a08d61d))
172 |
173 |
174 |
175 | # [1.16.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.14.2...v1.16.0) (2019-11-05)
176 |
177 |
178 | ### Bug Fixes
179 |
180 | * remove cross-env ([a222f6e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/a222f6e)), closes [#127](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/127)
181 | * remove cross-env ([#147](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/147)) ([ecf6a38](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/ecf6a38))
182 |
183 |
184 | ### Features
185 |
186 | * plugin option disable page prop injection ([d7c8edf](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/d7c8edf))
187 |
188 |
189 |
190 | ## [1.14.3](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.14.2...v1.14.3) (2019-11-05)
191 |
192 |
193 | ### Bug Fixes
194 |
195 | * remove cross-env ([a222f6e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/a222f6e)), closes [#127](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/127)
196 | * remove cross-env ([#147](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/147)) ([ecf6a38](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/ecf6a38))
197 |
198 |
199 |
200 | ## [1.14.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.14.1...v1.14.2) (2019-10-31)
201 |
202 |
203 | ### Bug Fixes
204 |
205 | * hotfix for safari where matchMedia.addEventListener is not a function ([0c5d845](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/0c5d845))
206 |
207 |
208 |
209 | ## [1.14.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.14.0...v1.14.1) (2019-10-30)
210 |
211 |
212 | ### Bug Fixes
213 |
214 | * builds! ([ff1b147](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/ff1b147))
215 |
216 |
217 |
218 | # [1.14.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.12.3...v1.14.0) (2019-10-30)
219 |
220 |
221 | ### Bug Fixes
222 |
223 | * enable 'open in new tab' functionality when clicking link with ctrl/cmd ([95f7bb2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/95f7bb2))
224 |
225 |
226 | ### Features
227 |
228 | * add forwardRef to TransitionLink ([785c328](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/785c328)), closes [/github.com/reach/router/blob/master/src/index.js#L368](https://github.com//github.com/reach/router/blob/master/src/index.js/issues/L368)
229 | * respect prefers-reduced-motion ([#146](https://github.com/TylerBarnes/gatsby-plugin-transition-link/issues/146)) ([e9a248a](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/e9a248a))
230 |
231 |
232 |
233 | # [1.13.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.12.4...v1.13.0) (2019-09-09)
234 |
235 |
236 | ### Features
237 |
238 | * add forwardRef to TransitionLink ([785c328](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/785c328)), closes [/github.com/reach/router/blob/master/src/index.js#L368](https://github.com//github.com/reach/router/blob/master/src/index.js/issues/L368)
239 |
240 |
241 |
242 | ## [1.12.4](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.12.3...v1.12.4) (2019-05-11)
243 |
244 |
245 | ### Bug Fixes
246 |
247 | * enable 'open in new tab' functionality when clicking link with ctrl/cmd ([95f7bb2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/95f7bb2))
248 |
249 |
250 |
251 | ## [1.12.3](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.12.2...v1.12.3) (2019-04-24)
252 |
253 |
254 |
255 | ## [1.12.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.12.1...v1.12.2) (2019-04-03)
256 |
257 |
258 | ### Bug Fixes
259 |
260 | * pass all available gatsby link props through ([0b7a1f0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/0b7a1f0))
261 |
262 |
263 |
264 | ## [1.12.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.12.0...v1.12.1) (2019-03-28)
265 |
266 |
267 | ### Bug Fixes
268 |
269 | * remove hardcoded morph duration ([e139199](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/e139199))
270 |
271 |
272 |
273 | # [1.12.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.11.1...v1.12.0) (2019-03-28)
274 |
275 |
276 | ### Features
277 |
278 | * Add anilink morph animation ([86c24ce](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/86c24ce))
279 |
280 |
281 |
282 | ## [1.11.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.11.0...v1.11.1) (2019-03-28)
283 |
284 |
285 | ### Bug Fixes
286 |
287 | * reinstate position relative so that z-index works!! ([12f0e51](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/12f0e51))
288 |
289 |
290 |
291 | # [1.11.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.5...v1.11.0) (2019-03-28)
292 |
293 |
294 | ### Bug Fixes
295 |
296 | * move react to peerdependencies to prevent it being loaded twice. ([cf0bc7a](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/cf0bc7a))
297 | * remove unneeded position relative on tl-wrapper element ([747124b](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/747124b))
298 |
299 |
300 | ### Features
301 |
302 | * add direction prop to paintDrip ([6161190](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/6161190))
303 | * add useTransitionState hook ([5b16766](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/5b16766))
304 |
305 |
306 |
307 | # [1.10.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.5...v1.10.0) (2019-03-28)
308 |
309 |
310 | ### Bug Fixes
311 |
312 | * move react to peerdependencies to prevent it being loaded twice. ([cf0bc7a](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/cf0bc7a))
313 |
314 |
315 | ### Features
316 |
317 | * add useTransitionState hook ([5b16766](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/5b16766))
318 |
319 |
320 |
321 | ## [1.9.5](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.4...v1.9.5) (2019-03-27)
322 |
323 |
324 | ### Bug Fixes
325 |
326 | * update scroll position after the new page is visible ([36e5000](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/36e5000))
327 | * update the transition renderer after the appear after delay ([8640edf](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/8640edf))
328 |
329 |
330 |
331 | ## [1.9.4](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.3...v1.9.4) (2019-03-27)
332 |
333 |
334 | ### Bug Fixes
335 |
336 | * move appearAfter logic to transition renderer ([561d843](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/561d843))
337 |
338 |
339 |
340 | ## [1.9.3](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.2...v1.9.3) (2019-03-27)
341 |
342 |
343 | ### Bug Fixes
344 |
345 | * prevent page from flickering on load ([1d800bb](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/1d800bb))
346 |
347 |
348 |
349 | ## [1.9.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.1...v1.9.2) (2019-03-27)
350 |
351 |
352 | ### Bug Fixes
353 |
354 | * don't change page opacity to hide ([9d69a8e](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/9d69a8e))
355 | * reset pages promises after transitions when using the new trigger prop ([6654337](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/6654337))
356 |
357 |
358 |
359 | ## [1.9.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.9.0...v1.9.1) (2019-03-26)
360 |
361 |
362 | ### Bug Fixes
363 |
364 | * only call trigger function if it exists! ([6ec1b08](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/6ec1b08))
365 |
366 |
367 |
368 | # [1.9.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.7.2...v1.9.0) (2019-03-26)
369 |
370 |
371 | ### Features
372 |
373 | * add trigger prop to TransitionLink. ([08d303b](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/08d303b))
374 | * improve performance by preventing extra renders ([af3a2bc](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/af3a2bc))
375 |
376 |
377 |
378 | # [1.8.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.7.2...v1.8.0) (2019-03-26)
379 |
380 |
381 | ### Features
382 |
383 | * improve performance by preventing extra renders ([af3a2bc](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/af3a2bc))
384 |
385 |
386 |
387 | ## [1.7.1](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.7.0...v1.7.1) (2019-03-25)
388 |
389 | # [1.7.0](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.6.2...v1.7.0) (2019-03-25)
390 |
391 | ### Features
392 |
393 | - prevent the back button during transitions ([f879140](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/f879140))
394 |
395 | ## [1.6.2](https://github.com/TylerBarnes/gatsby-plugin-transition-link/compare/v1.6.0...v1.6.2) (2019-03-25)
396 |
397 | ### Bug Fixes
398 |
399 | - make publishing workflow easier & bump version to fix incorrect publish ([b5e3e14](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/b5e3e14))
400 |
401 | # 1.6.0 (2019-03-25)
402 |
403 | ### Bug Fixes
404 |
405 | - 56: fixed missing scrollingElement in some browsers; ([b3aad7b](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/b3aad7b))
406 | - Add missing parenthesis on link ([f19dfc5](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/f19dfc5))
407 | - Update example site name for yarn workspaces ([2c58795](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/2c58795))
408 |
409 | ### Features
410 |
411 | - added property to configure swipe offset; ([ac95547](https://github.com/TylerBarnes/gatsby-plugin-transition-link/commit/ac95547))
412 |
413 | ## 1.5.2 (2019-03-14)
414 |
415 | ## 1.4.4 (2018-12-18)
416 |
417 | ## 1.4.1 (2018-12-02)
418 |
419 | ## 1.3.4 (2018-11-24)
420 |
421 | ## 1.3.1 (2018-11-23)
422 |
423 | # 1.3.0 (2018-11-22)
424 |
425 | ## 1.2.5 (2018-11-21)
426 |
427 | ## 1.2.3 (2018-11-17)
428 |
429 | ## 1.2.2 (2018-11-15)
430 |
431 | ## 1.1.2 (2018-11-12)
432 |
433 | ## 1.1.1 (2018-11-08)
434 |
435 | # 1.1.0 (2018-11-08)
436 |
437 | ## 1.0.11 (2018-11-07)
438 |
439 | ## 1.0.10 (2018-11-07)
440 |
441 | ## 1.0.7 (2018-11-07)
442 |
443 | ## 1.0.1 (2018-11-04)
444 |
445 | # 1.0.0 (2018-11-04)
446 |
447 | # 0.1.0 (2018-10-26)
448 |
449 | ## 1.5.2 (2019-03-14)
450 |
451 | Pass onClick handlers through to TransitionLink
452 |
453 | Thanks to @lsirivong, onClick handlers get passed through to AniLink and TransitionLink.
454 |
455 | ## 1.4.4 (2018-12-18)
456 |
457 | - Properly reset scroll position when clicking a link with no transition #21
458 | - More accurately calculate when the transition is complete #22
459 |
460 | ## 1.4.1 (2018-12-02)
461 |
462 | - don't pass all props through to gatsby-link, just pass activeStyle and className
463 | - only apply min height to the site wrapper when not in transition to fix some transition glitches for the swipe animation
464 | - prevent the fade transition from jumping the exiting page to the top of the screen
465 | - default fade transition default length is now 800ms instead of 400ms
466 |
467 | ## 1.3.4 (2018-11-24)
468 |
469 | Not all props were being passed through to gatsby link when using AniLink, this fixes that.
470 | This also fixes some inconsistencies in the documentation and the "duration" prop in AniLink.
471 |
472 | ## 1.3.1 (2018-11-23)
473 |
474 | Fix gatsby build error from last release
475 |
476 | # 1.3.0 (2018-11-22)
477 |
478 | Fix scroll jumping on save during development.
479 |
480 | Previously, saving your components or pages would cause the page to jump to the top, meaning you would have to scroll down to the component you were working on over and over. This fixes that.
481 |
482 | This should also fix the issue where footers in layout components weren't pushed down by the contents of your page.
483 |
484 | ## 1.2.5 (2018-11-21)
485 |
486 | Improved saved scroll position jumping + small refactor
487 |
488 | ## 1.2.3 (2018-11-17)
489 |
490 | This releases fixes `WebpackError: ReferenceError: GATSBY_LAYOUT_COMPONENT_PATH is not defined`
491 |
492 | ## 1.2.2 (2018-11-15)
493 |
494 | Prior to this release, GSAP needed to be installed for TransitionLink to not throw errors.
495 | Now, the AniLink component is moved to it's own file and will need to be imported as default from "gatsby-plugin-transition-link/AniLink".
496 |
497 | It looks like an earlier release also broke layout functionality and that has been fixed with this release.
498 | If you were getting the error
499 |
500 | ```bash
501 | warning in ../gatsby-plugin-transition-link/src/components/Layout.js
502 |
503 | Critical dependency: the request of a dependency is an expression
504 | ```
505 |
506 | v1.2.2 fixes this.
507 |
508 | ## 1.1.2 (2018-11-12)
509 |
510 | - Not all page props were being passed to layouts
511 | - Pathname wasn't being passed to the onEnter function which is using it
512 |
513 | ## 1.1.1 (2018-11-08)
514 |
515 | # 1.1.0 (2018-11-08)
516 |
517 | ## 1.0.11 (2018-11-07)
518 |
519 | ## 1.0.10 (2018-11-07)
520 |
521 | ## 1.0.7 (2018-11-07)
522 |
523 | ## 1.0.1 (2018-11-04)
524 |
525 | # 1.0.0 (2018-11-04)
526 |
527 | # 0.1.0 (2018-10-26)
528 |
--------------------------------------------------------------------------------