raj956

/* global gsap */ import React, { useEffect } from 'react'; import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import Navbar from './Navbar'; import backgroundImage from '../Assets/bmw.jpg'; const Herosection = () => { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline({ scrollTrigger: { trigger: "#main", markers: true, start: "50% 50%", end: "100% 50%", scrub: 2, // pin: true } }); tl.to("#center", { height: "100vh" }, 'a') .to("#top", { top: "-50%" }, 'a') .to("#bottom", { bottom: "-50%" }, 'a') .to("#top-h", { top: "60%" }, 'a') .to("#bottom-h", { bottom: "-30%" }, 'a') .to(".content", { delay: -0.2, marginTop: "0%" }); }, []); return ( <div> <Navbar /> <div id="main-p"></div> <div id="main"> <div id='top'> <h id="top-h">Gallery</h> </div> <div id="center" style={{ backgroundImage: `url(${backgroundImage})` }}> <div className="content"> <h4>GRAVITY</h4> <h3>Browse the work that define a movement and created a craft.</h3> <div className="btn"> <h5>ENTER GALLERY</h5> </div> <h2>(17)</h2> </div> </div> <div id='bottom'> <h id="bottom-h">Gallery</h> </div> </div> </div> ); }; export default Herosection; //css *{ margin: 0; padding: 0; box-sizing: border-box; color: #0f0f0f; } @font-face { font-family: Founder; src: url(./Assets/FoundersGroteskCondensed-Bold.woff2); } @font-face { font-family: CardinalR; src: url(./Assets/cardinalfruitweb-regular.woff2); } @font-face { font-family: Cardinali; src: url(./Assets/cardinalfruitweb-italic.woff2); } @font-face { font-family: Font1; src: url(./Assets/kesslersuperdisplayweb-regular.ttf); } @font-face { font-family: Font2; src: url(./Assets/FraktionMono-Regular.ttf); } html, body { font-family: "Roslindale Display Condensed"; scroll-behavior: smooth; scroll-snap-type: y proximity; } .nav { position: fixed; width: 100%; display: flex; justify-content: space-between; z-index: 1000; } .nav-links { display: flex; } .logo, .nav-item { margin: 2em; font-weight: 400; font-size: 1.5vw; } h1 { width: 80%; position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-weight: 500; font-size: 20vw !important; line-height: 1; text-transform: uppercase; } a { text-decoration: none; font-weight: 500; } .slide-in { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: bottom; z-index: 15; } .slide-out { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #0f0f0f; transform-origin: top; z-index: 15; } #main-p{ width:100%; height:100vh; background-color: #ffffff; } #main{ position: relative; width: 100%; height: 100vh; background-color: aquamarine; overflow: hidden; z-index: 0; } #top{ position: absolute; top: 0; width: 100%; height: 50vh; background-color: #fff; z-index: 1; overflow: hidden; } #center{ position: relative; width: 100%; height: 100vh; transform-origin: center; background-color: rgba(0, 0, 0, 0.5); transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; overflow: hidden; } #bottom{ position: absolute; bottom: 0; width: 100%; height: 50vh; background-color: #fff; overflow: hidden; } #main h{ font-family: Founder; font-size: 22vw; position: absolute ; top: 46.5%; left: 50%; transform: translate(-50%,-50%); } #top-h{ bottom: 50% ; } #bottom-h{ top:0% !important; } .content{ margin-top: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100vh; color: #ffffff; gap: 4vh; } .content h4{ font-size: 1vw; font-family: Founder; color: #fff; } .content h3{ width: 22%; font-size: 3vw; font-family: CardinalR; text-align: center; font-weight: 400; color: #fff; } .content .btn{ display: flex; align-items: center; justify-content: center; width: 7vw; height: 2vw; border-radius: 50px; background-color: #fff; color: #0d0d0d; font-family: Founder; } .content h2{ font-size: 20vw; font-family: Founder; color: #fff; } /* HeroSection2 */ #main1{ position: relative; display: flex; align-items: center; width: 100%; height: 100vh; z-index: 0; /* overflow: hidden; */ margin-top: 100px; } .left1{ display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; } .center1{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 40%; height: 120%; } .right1{ display: flex; align-items: center; justify-content: center; width: 30%; height: 100%; } .btn1{ display: flex; align-items: center; justify-content: center; align-items: center; padding: 0.5vw 1.2vw; border: 1px solid #333; border-radius: 50px; font-size: 0.5vw; font-family: Font2; transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; } .t-center{ display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 50%; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .b-center{ width: 100%; height: 50%; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .center1 hk{ line-height: 15vh; font-size: 10vw; font-weight: 400; font-family: Font1; text-align: center; } .c-center-one{ position: relative; transform-origin: center; width: 100%; height: 0vh; transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s; } .c-center-two{ width: 100%; height: 0vh; transition: all cubic-bezier(0.19, 1, 0.22, 1)1s; } .img-all{ position: absolute; opacity: 0; pointer-events: none; transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; background-size: cover; background-position: center; z-index: 200; } .img-one{ bottom: 60%; right: 50%; width: 25vw; height: 25vh; filter: blur(10px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-two{ top: 55%; left: 50%; width: 15vw; height: 17vh; filter: blur(5px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-three{ top: 50%; left: 37%; width: 10vw; height: 12vh; background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); filter: blur(20px); transition: all cubic-bezier(0.19, 1, 0.22, 1)2s; } .img-four{ top: 40%; left: 55%; width: 7vw; height: 7vh; background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); filter: blur(20px); } #one{ background-image: url(https://images.unsplash.com/photo-1682687218608-5e2522b04673?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2575&q=80); } #two{ background-image: url(https://images.unsplash.com/photo-1683446297911-f4a1fa8e62dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2564&q=80); } #three{ background-image: url(https://images.unsplash.com/photo-1683573254548-ebb7b94d7def?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1353&q=80); } #four{ background-image: url(https://images.unsplash.com/photo-1683053243792-28e9d984c25a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80); } #five{ background-image: url(https://images.unsplash.com/photo-1682709846996-f3c895743d37?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #six{ background-image: url(https://images.unsplash.com/photo-1682794496831-81a52c8e9136?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #seven{ background-image: url(https://images.unsplash.com/photo-1682314803906-d2078f031d82?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80); } #eight{ background-image: url(https://images.unsplash.com/photo-1682200736161-77f04daf9a59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1744&q=80); } /* Componets2 */ .links { display:flex; gap:3em; } a{ text-decoration: none; color: #000; } footer { position: fixed; bottom:0; width: 100%; padding: 3em; display: flex; justify-content: space-between; align-items: center; } .hero { width: 100%; position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); text-align: center; z-index: -1; } h1 { width: 100%; color: #c0c0c0; font-size: 15vw; font-weight: 400; letter-spacing: -0.05em; } p { font-size: 1.5vw; color: #000; opacity: 0.35; } .btn { position: relative; top:75%; left:50%; transform: translate(-50%, -50%); background: #0084ff; color: #fff; font-size: 12px; border-radius: 30px; padding: 1em 2em; cursor:pointer; z-index: 2; } .img-gallery-container { display: flex; position: relative; width: 100vw; padding-top: 100vh; } .img { position: absolute; margin-bottom: 1em; width: 400px; height: 500px; overflow: hidden; top:50%; left: 50%; transform: translate(-50%, -50%); } .img:nth-child(1), .img:nth-child(3) { left:75%; } .img:nth-child(2), .img:nth-child(4) { left:25%; } .img.reorder { position: absolute; top:47.5%; left:50%; transform: translate(-50%, -50%); width: 250px; height: 325px; } .img.reorder:nth-child(1) { transform: translate(-50%,-50%) rotate(10deg); } .img.reorder:nth-child(2) { transform: translate(-50%,-50%) rotate(-5deg); } .img.reorder:nth-child(3) { transform: translate(-50%,-50%) rotate(2deg); } .img.reorder:nth-child(4) { transform: translate(-50%,-50%) rotate(-2deg); } package.json { "name": "react-website", "version": "0.1.0", "private": true, "dependencies": { "@gsap/react": "^2.1.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "framer-motion": "^11.0.6", "gsap": "^3.12.5", "locomotive-scroll": "^4.1.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-locomotive-scroll": "^0.2.2", "react-router-dom": "^6.22.1", "react-scripts": "5.0.1", "sass": "^1.71.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } can anyone solve why pin true is not working in my code