K-72/notes.text at main · coder-Rishi05/K-72 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/all";

import React, { useRef } from "react";
import { useLocation } from "react-router-dom";

const Agency = () => {
  // useLocation

  // const locate = useLocation();

  //   console.log(locate.pathname);

  gsap.registerPlugin(ScrollTrigger);

  const imageDivRef = useRef(null);
  const imageRef = useRef(null);

  // useGSAP(() => {
  //   gsap.to(imageDivRef.current,{
  //     scrollTrigger:{
  //       trigger: imageDivRef,
  //       markers: true,
  //       start: "top 36%",
  //       end: "top -100%",
  //       pin: true,
  //       scrub: true,
  //     },
  //   });
  // });

  const imgArray = [
    "https://k72.ca/uploads/teamMembers/Carl_480x640-480x640.jpg",
    "/img/img1.jpeg",
    "/img/img2.jpeg",
    "/img/img3.jpeg",
    "/img/img4.jpeg",
    "/img/img5.jpeg",
    "/img/img6.jpeg",
    "/img/img7.jpeg",
    "/img/img8.jpeg",
    "/img/img9.jpeg",
    "/img/img10.jpeg",
    "/img/img11.jpeg",
    "/img/img12.jpeg",
    "/img/img13.jpeg",
  ];

  useGSAP(function () {
    gsap.to(imageDivRef.current, {
      scrollTrigger: {
        trigger: imageDivRef.current,
        // markers: true,
        start: "top 21.9%",
        end: "top -100%",
        scrub: 1,
        pin: true,
        pinSpacing: true,
        pinReparent: true,
        pinType: "transform",
        anticipatePin: 1,
        invalidateOnRefresh: true,
        onUpdate: (e) => {
          let imgIndex;
          if (e.progress < 1) {
            imgIndex = Math.round(e.progress * imgArray.length);
          } else {
            imgIndex = imgArray.length - 1;
          }

          imageRef.current.src = imgArray[imgIndex];
          // console.log(imageRef.current.src);
        },
      },
    });
  });

  return (
    <div>
      <div className="section1 relative py-1 ">
        <div
          ref={imageDivRef}
          className="img h-80 -z-10 top-40 left-112   absolute w-60"
        >
          <img
            ref={imageRef}
            className="h-full w-full rounded-4xl  object-cover "
            src="https://k72.ca/uploads/teamMembers/Carl_480x640-480x640.jpg"
            alt="personImg"
          />
        </div>
        <div className=" relative mt-[55vh]">
          <h1 className="text-[20vw]  uppercase font-[font2] leading-[18vw] font-semibold text-center">
            SEVEN7Y <br />
            TWO
          </h1>

          <div className="pl-[50%]  ">
            <p className=" text-5xl font-bold font-[font2] ">
              &nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We’re
              inquisitive and open-minded, and we make sure creativity crowds
              out ego from every corner. A brand is a living thing, with values,
              a personality and a story. If we ignore that, we can achieve
              short-term success, but not influence that goes the distance. We
              bring that perspective to every brand story we help tell.
            </p>
          </div>
        </div>
      </div>
      <div className="section2 h-screen"></div>
    </div>
  );
};

export default Agency;