Jump to content
Search Community

Fahad247

Members

  • Posts

    1

  • Joined

  • Last visited

Fahad247's Achievements

  • One Month Later
  • Dedicated Rare
  • Conversation Starter Rare
  • Week One Done
  • Reacting Well Rare

Recent Badges

0

Reputation

  1. Fahad247 started following Cant change start marker position
  2. Fahad247
    /* 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
×
×
  • Create New...