Jump to content
Search Community

raj956

Members

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by raj956

    Scrolltrigger pin:true issue

    in GSAP

    Posted

    /* 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
×
×
  • Create New...