lintarabail

import React, { useEffect, useLayoutEffect, useRef } from "react"; import Navbar from "../../Components/Navbar"; import HeroSection from "../hero-section"; import SecondSection from "../SecondSection"; import ThirdSection from "../third-section"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import my from "../../assets/videos/my.mp4"; import MyProjects from "../projects-section"; import useLocoScroll from "../../utils/customHooks/useLocoMotive"; import { useState } from "react"; const Main = () => { // refs const ref = useRef(null); const img = useRef(null); // initialalizing custom hook useLocoScroll(); // regiester ScrollTrigger gsap.registerPlugin(ScrollTrigger); useLayoutEffect(() => { let ctx = gsap.context(() => { const elem = ref.current; // for second section text gsap.to( elem.querySelector("#hid"), { transform: "translateX(-100%)", ease: "none", fontWeight: "40", scrollTrigger: { trigger: document.querySelector("#component"), markers: false, start: "start start", // end: "bottom 40%", // end: () => "+=" + document.querySelector("#hid").offsetWidth, end: () => "+=" + document.querySelector("#hid").offsetWidth * 0.1, scrub: 1, pin: true, fastScrollEnd: true, }, }, ref ); }); return () => { ctx.revert(); }; }, []); useLayoutEffect(() => { const ctx = gsap.context(() => { const elem = img.current; console.log(); gsap.fromTo( "#header_img", { scale: 0.3, translateY: "-60%" }, { // y: -10, scale: 1, ease: "none", force3D: true, scrollTrigger: { trigger: elem, pin: true, start: "top 65%", end: "bottom 70%", // pinType: isTouch ? "fixed" : "transform", scrub: 1, markers: true, }, } ); }); return () => { ctx.revert(); }; }, []); return ( <> <div ref={ref} id="scroll_head" data-scroll-container> <Navbar /> <HeroSection /> {/* second section */} <div className="flex justify-start items-center overflow-hidden h-[100vh]" id="component" data-scroll-section > <h1 className="text-[40vw] uppercase main-heading whitespace-nowrap py-10" id="hid" > Where Imagination Meets Code </h1> <p className="text-white text-4xl">njgjhghgt</p> </div> {/* Third section */} <div className="h-[60vh] flex justify-center items-center" ref={img} data-scroll-section> <img src="https://platinumlist.net/guide/wp-content/uploads/2023/03/IMG-worlds-of-adventure.webp" alt="" data-speed="0.5" id="header_img" style={{ transformOrigin: "center center", scale: "0.3" }} /> </div> <MyProjects /> </div> </> ); }; export default Main; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/all"; import LocomotiveScroll from "locomotive-scroll"; import { useEffect } from "react"; import { Scroll } from "react-locomotive-scroll"; gsap.registerPlugin(ScrollTrigger); const useLocoScroll = (start, ref) => { useEffect(() => { let locoScroll = new LocomotiveScroll({ el: document.querySelector("[data-scroll-container]"), smooth: true, // multiplier: 1, class: "is-reveal", }); locoScroll.on("scroll", () => { ScrollTrigger.update(); }); ScrollTrigger.scrollerProxy( document.querySelector("[data-scroll-container]"), { scrollTop(val) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(val, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, scrollLeft(val) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(val, 0, 0) : locoScroll.scroll.instance.scroll.x; } return null; }, } ); const isUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", isUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", isUpdate); locoScroll.destroy(); locoScroll = null; } }; }, [start]); }; export default useLocoScroll;