-
Notifications
You must be signed in to change notification settings - Fork 0
/
gatsby-browser.js
executable file
·120 lines (97 loc) · 3.46 KB
/
gatsby-browser.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import React from "react"
import "./src/html.scss"
import Layout from "./src/components/layout"
import { NaviContextProvider } from "./src/context/NaviContext"
import { ModalContextProvider } from "./src/context/ModalContext"
import { FSLightBoxContextProvider } from "./src/context/FSLightBoxContext"
import client from './src/apollo/client'
import {ApolloProvider} from '@apollo/client'
//import { SplitText, TimelineMax } from "gsap/all"
// Splitting text lines for animation
import Splitting from "splitting"
//const transitionDelay = 200;
// Contexts
// export const wrapPageElement = ({ element }) => (
// <NaviContextProvider>{element}</NaviContextProvider>
// )
// Layout
export const wrapPageElement = ({ element, props }) => {
return (
<ApolloProvider client={client}><FSLightBoxContextProvider {...props}><NaviContextProvider {...props}><ModalContextProvider {...props}><Layout {...props}>{element}</Layout></ModalContextProvider></NaviContextProvider></FSLightBoxContextProvider></ApolloProvider>
)
}
// Splitting
export const onRouteUpdate = () => {
// Elements that are direct children of splittext-lines class
const lines = document.querySelectorAll('.splittext-lines > h1, .splittext-lines > h2, .splittext-lines > h3, .splittext-lines > h4, .splittext-lines > h5, .splittext-lines > h6')
const chars = document.querySelectorAll('.splittext-chars > h1, .splittext-chars > h2, .splittext-chars > h3, .splittext-chars > h4, .splittext-chars > h5, .splittext-chars > h6')
Splitting({
target: lines,
by: 'lines',
key: null
})
Splitting({
target: chars,
by: 'chars',
key: null
})
// // Wrap them once as per normal
// const linesSplittext = new SplitText(lines, {
// type: "lines",
// linesClass: "text-line"
// })
// let linesToAnimate = linesSplittext.lines
// // Wrap them again to prep for animation (overflow hidden)
// const linesSplittextOverflow = new SplitText(lines, {
// type: "lines",
// linesClass: "muhlines line-++"
// })
// const isInview = document.querySelectorAll('.is-inview')
// const nodes = [...isInview]
// // Set threshold for
// const config = {
// threshold: 0 // 0% of the element is visible
// }
// // // Start GSAP timeline
// // const tl = new TimelineMax()
// // Set up observer
// let observer = new IntersectionObserver(function(entries, self) {
// entries.forEach(entry => {
// if (entry.isIntersecting) {
// entry.target.classList.add('inview','inview-rn')
// } else {
// entry.target.classList.remove('inview-rn')
// }
// })
// }, config)
// // Set up observers on all of the items
// nodes.forEach(box => {
// observer.observe(box)
// })
}
export const onInitialClientRender = () => {
// Remove Loader
document.getElementById("___loader").style.display = "none"
}
// export const onClientEntry = () => {
// window.onload = () => {
// setTimeout(function() {
// document.getElementById("___loader").style.display = "none"
// }, 20)
// }
// }
// export const shouldUpdateScroll = ({
// routerProps: { location },
// getSavedScrollPosition
// }) => {
// if (location.action === "PUSH") {
// window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
// } else {
// const savedPosition = getSavedScrollPosition(location)
// window.setTimeout(
// () => window.scrollTo(...(savedPosition || [0, 0])),
// transitionDelay
// )
// }
// return false;
// }