/* eslint-disable jsx-a11y/alt-text */
import Head from "next/head";
import Image from "next/image";
import { Inter, Monoton, Pacifico, Permanent_Marker } from "next/font/google";
import styles from "@/styles/Home.module.css";
// const fbt = FrederickaTheGreat({ subsets: ["latin"],weight: ['400'], });
import Logo from "./components/logo";
import { useEffect, useRef, useState,useLayoutEffect } from "react";
import Link from "next/link";
import { gsap } from "gsap/dist/gsap.js";
import ScrollTrigger from "gsap/dist/ScrollTrigger.js";
import Poster from "./components/poster";
import SplitType from "split-type";
import Nav from "./components/nav";
gsap.registerPlugin(ScrollTrigger);
export default function Home() {
const myElement = useRef();
const handleDone = () => {
console.log(`Done after 5 loops!`);
};
const [isVisible, setIsVisible] = useState(false);
const [st, setSt] = useState([]);
// const [ani,setAni] = useState([]);
const [ani, setAni] = useState({});
const [anima, setAnima] = useState([]);
useEffect(() => {
const svSt = {
display: "none",
};
setSt(svSt);
const timer = setTimeout(() => {
const svSt = {};
setSt(svSt);
console.log("showing");
}, 4050);
return () => clearTimeout(timer);
}, []);
useEffect(() => {
setAnima({ display: "none" });
const timer = setTimeout(() => {
setAni(styles.open);
setAnima({ display: "block" });
const text = new SplitType(myElement.current, { types: "words, chars" });
setIsVisible(true);
gsap.fromTo(
text.chars,
{
opacity: 0,
},
{
opacity: 1,
y: 0,
stagger: 0.05,
delay: 0.2,
duration: 0.1,
}
);
// console.log("showing");
}, 4100);
// const observer = new IntersectionObserver((entries) => {
// entries.forEach((entry) => {
// if (entry.intersectionRatio > 0) {
// // console.log(entry.intersectionRatio > 0);
// const timer = setTimeout(() => {
// setIsVisible(true);
// console.log("showing");
// }, 2000);
// return () => {
// clearTimeout(timer);
// };
// } else {
// setIsVisible(false);
// }
// },{
// threshold:1
// });
// });
// observer.observe(circleRef.current);
return () => {
clearTimeout(timer);
// observer.disconnect();
};
}, []);
const circleRef = useRef(null);
function startMove(e) {
move(e);
}
function move(e) {
document.querySelector("#buble1").style.marginLeft = `${e.pageX / 70}px`;
document.querySelector("#buble1").style.marginTop = `${e.pageY / 70}px`;
document.querySelector("#buble2").style.marginLeft = `${e.pageX / 70}px`;
document.querySelector("#buble2").style.marginTop = `${e.pageY / 70}px`;
// console.log(e.pageX);
}
const labMain = useRef();
const posterBox = useRef();
useEffect(() => {
console.clear();
window.addEventListener("resize", () => {
ScrollTrigger.refresh();
});
// let tl = gsap.timeline({
// scrollTrigger: {
// trigger: ".secBox",
// start: "top 30%",
// end: "bottom bottom",
// markers: true,
// scrub: "0.6",
// markers: {
// startColor: "orange",
// endColor: "blue",
// fontSize: "18px",
// fontWeight: "bold",
// indent: 20
// },
// }
// });
let tl = gsap.timeline({
scrollTrigger: {
trigger: ".secBox",
start: "top 20%",
end: "center 50%",
markers: true,
scrub: "0.6"
}
});
tl.to(".secBox", {
opacity: 1,
x: 100
});
tl.to(".secBox", {
opacity: 1,
x: 100
});
return () => {
tl.kill();
};
}, []);
return (
<>
<Head>
<title>Md.Fahad.Ali</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<div className={styles.loading}>
<Logo />
</div>
<div
className={`scrollerMain `}
style={st.length == 0 ? { display: "none" } : st}
>
<div className={styles.posterbox} ref={posterBox}>
<Nav />
<div className={styles.poster}>
<Poster />
</div>
</div>
<div ref={labMain} className={styles.secondBox}>
<div className={`secBox ${styles.labMain}`}></div>
</div>
</div>
</main>
</>
);
}
Please help me to fix the code