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 (
<>
{
this.handleExit.bind(this);
}}
key={path}
onEnter={this.handleEnter.bind(this)}
onExit={(node, done) => this.handleExit(node, done)}
>
);
}
}