💻 Gonshiro

• 사이트명: Gonshiro
• 사용언어: HTML, CSS, JavaScript
• 라이브러리: jQuery, GSAP, ScrollTrigger, Lenis
• 유형: 반응형
• 📰 https://hallowmang.github.io/gonshiro/

✅ Check Point

✔ Shrink Logo
✔ GSAP의 toggleActions
✔ scrollTrigger에서 사용되는 이벤트 콜백
✔ 스크롤위치에 따른 색상변경

---

1. Shrink Logo

awwwards를 둘러보는 도중에 구찌 홈페이지를 들어가 보니 로고가 스크롤을 하면 줄어들거나 커지는 애니메이션이 나왔다.
그래서 이 프로젝트에도 구찌처럼 로고에 애니메이션을 주고 싶었다.

또한, 해당 스크롤에 들어가면 로고의 글자색상도 변경이 되게 해보았다.

const trigger = ScrollTrigger.create({
  animation: gsap.from(".logo", {
    y: "9vh",        // 초기 위치: y축으로 9vh 이동
    scale: 13,        // 초기 크기: 13배로 확대
    yPercent: -50,    // 초기 위치: y축 방향으로 -50% 이동
  }),
  scrub: 0.5,
  trigger: ".sc-visual",  
  start: "center center", 
  endTrigger: ".sc-about", 
  end: "40% center",      
});

// 로고의 색상을 변경하는 함수를 정의
function changeColor(progress) {
  gsap.to(".logo", {
    color: progress >= 0.7 ? "#333" : "#fff", 
    duration: 0.3, // 변경되는 색상의 부드러운 전환을 위한 duration 속성
  });
}

// ScrollTrigger의 onUpdate 콜백을 활용하여 로고의 색상을 변경하는 함수를 호출
trigger.animation.eventCallback("onUpdate", function () {
  const triggerPosition = trigger.progress; // 현재 ScrollTrigger의 진행 상태를 가져와 저장
  changeColor(triggerPosition); // 진행 상태에 따라 로고의 색상을 변경하는 함수 호출
});

🤔progress??⭐⭐⭐⭐

forner studio 리뉴얼을 정리할 때 설명했지만, 다시 정리~~~
자주 쓰이는듯

progress는 GSAP의 ScrollTrigger에서 제공하는 속성 중 하나
현재 ScrollTrigger의 애니메이션 진행 상태를 나타낸다. 이 값은 0에서 1 사이의 실수로 표현되고,
스크롤 위치에 따라 어느 정도 진행되었는지를 나타낸다.

예시

ScrollTrigger.create({
  trigger: ".trigger",
  start: "top center",
  end: "+=500",
  onUpdate: (self) => console.log("progress:", self.progress),
});

self는 GSAP의 ScrollTrigger 콜백 함수에서 사용되는 매개변수로, 해당 ScrollTrigger 인스턴스를 가리킨다.
즉, self를 통해 ScrollTrigger의 속성 및 메서드에 접근할 수 있다.

self.progress는 현재 ScrollTrigger의 진행 상태를 나타내는 속성으로, 스크롤 진행에 따른 값이 0에서 1까지 변한다. 위의 코드에서는 스크롤 진행 상태가 업데이트될 때마다 콘솔에 현재 progress 값을 출력하도록 설정.

self를 이용하면 ScrollTrigger 콜백 함수에서 다양한 정보를 가져와 활용할 수 있다. 예를 들어, self.start 및 self.end를 통해 시작 및 종료 지점을 확인하거나, self.trigger를 통해 트리거 요소에 대한 정보를 얻을 수 있다.

스크롤 값에 따라 애니메이션을 준 다른 프로젝트도 있으니 참고하기~!!!
forner studio 리뉴얼

---

2. scrollTrigger에서 사용되는 이벤트 콜백⭐⭐⭐

왼쪽의 배경이 스크롤 시 인덱스에 따라 배경화면과 글자색상이 변경되게 하고 싶었다.
GSAP의 scrollTrigger에서 여러 이벤트 콜백들이 있었는데 그 중에 onToggle을 사용하여, 해당영역에 토글이 되면 이벤트가 발생이 되게하였다.

const infos = document.querySelectorAll(".info"); // 모든 .info 요소 선택

infos.forEach((info, index) => {
  ScrollTrigger.create({
    trigger: info,
    start: "top center",
    end: "bottom center",
    // markers:true,
    onToggle: (self) => {
      const { isActive } = self; // ScrollTrigger의 활성화 상태 확인
      let styles;

      // 각 .info 요소에 따라 스타일 지정
      switch (index) {
          // index가 1인 경우
        case 1:
          styles = isActive
            ? { backgroundColor: "#e6e6e3", color: "#333" }
            : { backgroundColor: "rgb(197, 37, 53)", color: "#fff" };
          break;
          // index가 2인 경우
        case 2:
          styles = isActive
            ? { backgroundColor: "#c2a395", color: "#fff" }
            : { backgroundColor: "rgb(197, 37, 53)", color: "#fff" };
          break;
          // index가 3인 경우
        case 3:
          styles = isActive
            ? { backgroundColor: "#333333", color: "#fff" }
            : { backgroundColor: "rgb(197, 37, 53)", color: "#fff" };
          break;
          // 그 외의 경우
        default:
          styles = { backgroundColor: "#c52535", color: "#fff" };
          break;
      }

      gsap.to(".info", {
        backgroundColor: styles.backgroundColor,
        color: styles.color,
        duration: 0.5,
        ease: "power2.out",
      });
    },
  });
});

.info 요소에 대해 ScrollTrigger를 생성하고, 해당 요소가 특정 인덱스 스크롤 위치에 도달하거나 떠날 때 발생하는 onToggle 콜백을 통해 요소에 따라 다른 스타일을 적용.

🤔이벤트콜백??⭐⭐

이벤트콜백이 무엇일까? 한번 알아보자~

1. onEnter:

• 이벤트 발생 시점: 스크롤 요소가 트리거 영역에 진입할 때 발생.
• 사용 예시: 요소가 화면에 나타날 때 애니메이션을 시작.

onEnter: (self) => console.log("entered")

2. onLeave:

• 이벤트 발생 시점: 스크롤 요소가 트리거 영역을 떠날 때 발생.
• 사용 예시: 요소가 화면에서 사라질 때 애니메이션을 추가.

onLeave: (self) => console.log("left")

3. onEnterBack:

• 이벤트 발생 시점: 역방향으로 스크롤하여 요소가 다시 트리거 영역에 진입할 때 발생.
• 사용 예시: 역방향 스크롤 시 애니메이션을 추가.

onEnterBack: (self) => console.log("entered back")

4. onLeaveBack:

• 이벤트 발생 시점: 역방향으로 스크롤하여 요소가 트리거 영역을 떠날 때 발생.
• 사용 예시: 역방향 스크롤 시 애니메이션을 추가.

onLeaveBack: (self) => console.log("left back")

⭐5. onToggle:

• 이벤트 발생 시점: ScrollTrigger의 토글 상태가 변경될 때 발생.
• 사용 예시: ScrollTrigger의 상태 변화를 감지하여 작업 수행.

onToggle: (self) => console.log("toggled, isActive:", self.isActive)