224 lines
4.9 KiB
JavaScript
224 lines
4.9 KiB
JavaScript
import App, { Container } from "next/app";
|
|
import Script from 'next/script'
|
|
import Head from "next/head";
|
|
|
|
import { gsap } from "gsap/dist/gsap";
|
|
import { SplitText } from "gsap/dist/SplitText";
|
|
import { Transition, SwitchTransition } from "react-transition-group";
|
|
|
|
// component imports
|
|
import Footer from "../components/footer.jsx";
|
|
import Navbar from "../components/navbar.jsx";
|
|
|
|
import { getWidth } from "../components/utils.jsx";
|
|
// css imports
|
|
import "bootstrap/dist/css/bootstrap.css";
|
|
import "../styles/globals.scss";
|
|
import "../styles/footer.scss";
|
|
import "../styles/navbar.scss";
|
|
import "../styles/darkmode.scss";
|
|
|
|
gsap.registerPlugin(SplitText);
|
|
|
|
export default class Site extends App {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleEnter = this.handleEnter.bind(this);
|
|
this.handleExit = this.handleExit.bind(this);
|
|
this.initTl = this.initTl.bind(this);
|
|
|
|
this.tl = gsap.timeline();
|
|
|
|
this.state = {
|
|
isReady: true,
|
|
};
|
|
}
|
|
|
|
initTl() {
|
|
if (document.querySelector(".landing-img")) {
|
|
this.tl.from(".landing-img", {
|
|
opacity: 0,
|
|
});
|
|
}
|
|
|
|
if (document.querySelector(".products-img")) {
|
|
if (getWidth() > 1200) {
|
|
this.tl.from(".products-img", {
|
|
opacity: 0,
|
|
width: "100vw",
|
|
});
|
|
} else {
|
|
this.tl.from(".products-img", {
|
|
opacity: 0,
|
|
height: "100vh",
|
|
});
|
|
}
|
|
}
|
|
|
|
if (document.querySelector(".mainheading")) {
|
|
this.tl.from(".mainheading", {
|
|
opacity: 0,
|
|
y: 5,
|
|
});
|
|
}
|
|
|
|
if (document.querySelector(".subheading")) {
|
|
this.tl.from(".subheading", {
|
|
opacity: 0,
|
|
y: 5,
|
|
});
|
|
}
|
|
|
|
if (document.querySelector(".description")) {
|
|
this.tl.from(
|
|
".description",
|
|
{
|
|
opacity: 0,
|
|
y: 5,
|
|
},
|
|
0.6
|
|
);
|
|
}
|
|
|
|
if (document.querySelector(".quicknav")) {
|
|
this.tl.from(".quicknav", {
|
|
opacity: 0,
|
|
x: -50,
|
|
});
|
|
}
|
|
}
|
|
|
|
handleEnter() {
|
|
this.initTl();
|
|
this.tl.play();
|
|
this.setState({
|
|
isReady: true,
|
|
});
|
|
}
|
|
|
|
handleExit(node, done) {
|
|
this.setState({
|
|
isReady: false,
|
|
});
|
|
this.tl.clear();
|
|
|
|
if (document.querySelector(".mainheading")) {
|
|
this.tl.to(".mainheading", {
|
|
opacity: 0,
|
|
duration: 0.2,
|
|
});
|
|
}
|
|
|
|
if (document.querySelector(".description")) {
|
|
this.tl.to(
|
|
".description",
|
|
{
|
|
opacity: 0,
|
|
duration: 0.2,
|
|
},
|
|
0
|
|
);
|
|
}
|
|
|
|
if (document.querySelector(".products-img")) {
|
|
if (getWidth() > 1200) {
|
|
this.tl.to(
|
|
".products-img",
|
|
{
|
|
opacity: 0,
|
|
width: 0,
|
|
duration: 0.5,
|
|
},
|
|
0
|
|
);
|
|
} else {
|
|
this.tl.to(
|
|
".products-img",
|
|
{
|
|
opacity: 0,
|
|
height: 0,
|
|
minHeight: 0,
|
|
duration: 0.5,
|
|
},
|
|
0
|
|
);
|
|
}
|
|
}
|
|
|
|
if (document.querySelector(".landing-img")) {
|
|
this.tl.to(".landing-img", {
|
|
scale: 0.9,
|
|
opacity: 0,
|
|
});
|
|
}
|
|
|
|
this.tl.to(node, {
|
|
opacity: 0,
|
|
duration: 0.1,
|
|
onComplete: done,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { Component, pageProps, router } = this.props;
|
|
let path = router.asPath;
|
|
return (
|
|
<>
|
|
<Head>
|
|
<link
|
|
rel="apple-touch-icon"
|
|
sizes="180x180"
|
|
href="/apple-touch-icon.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="/favicon-32x32.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="/favicon-16x16.png"
|
|
/>
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
<meta name="msapplication-TileColor" content="#da532c" />
|
|
<meta name="theme-color" content="#ffffff" />
|
|
<meta httpEquiv="content-language" content="de" />
|
|
</Head>
|
|
<Navbar />
|
|
<SwitchTransition mode="out-in">
|
|
<Transition
|
|
timeout={1000}
|
|
addEndListener={(node, done) => {
|
|
this.handleExit.bind(this);
|
|
}}
|
|
key={path}
|
|
onEnter={this.handleEnter.bind(this)}
|
|
onExit={(node, done) => this.handleExit(node, done)}
|
|
>
|
|
<Component {...pageProps} className="component" />
|
|
</Transition>
|
|
</SwitchTransition>
|
|
<Footer />
|
|
|
|
<Script
|
|
src="https://www.googletagmanager.com/gtag/js?id=G-504FPVG74X"
|
|
strategy="afterInteractive"
|
|
/>
|
|
<Script id="google-analytics" strategy="afterInteractive">
|
|
{`
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){window.dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'G-504FPVG74X');
|
|
`}
|
|
</Script>
|
|
</>
|
|
);
|
|
}
|
|
}
|