Jump to content
Search Community

Fahad247

Members

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by Fahad247

    Cant change start marker position

    in GSAP

    Posted

    /* 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 :)
     
    image.png.a84936dae8dc66a38d08707d3008f4d6.png
×
×
  • Create New...