FLO

GSAP portfolio renewal

#FLO #적응형 #scss #javascript #gsap #리뉴얼

📌 PROJECT KEY POINTS

1. gsap 라이브러리 활용
   1-1) 공통 레이아웃 : 반복문 적용
   1-2) clip-path 를 활용한 스크롤 애니메이션
   1-3) 루프 애니메이션
   1-4) data- 프로퍼티 활용
2. 공통 레이아웃 scss 처리
3. javascript 헤더 스크롤 이벤트

---

1. gsap 라이브러리 활용

▪️ 1-1) 공통 레이아웃 : 반복문 적용

1) 헤드라인 텍스트 스크럽 모션 (공통)

gsap.utils.toArray('.text-flow-area .headline').forEach(element => {
    gsap.to(element, {
      scrollTrigger: {
        trigger: element.parentElement,
        start:"0% 100%",
        end:"100% 0%",
        scrub: 1,
      },
      xPercent: -100,
    })
  });

🖋 code review
forEach 문을 활용한 반복 레이아웃 처리. 반복되는 레이아웃의 각 부모를 (trigger:element.parentElement,) 스크롤 트리거 기준으로 잡는다.

2) group-grid 텍스트 모션 (공통)

gsap.utils.toArray('.col-right').forEach(element => {
    gsap.to(element,{
      scrollTrigger:{
        trigger: element.parentElement,
        start: "0% 60%",
        end: "100% 80%",
      },
      yPercent: 0, 
      opacity: 1,
      delay: .3
    })
  });

▪️ 1-2) clip-path 를 활용한 스크롤 애니메이션

✔️ clip-path 란??
clip-path 속성을 정의하게 되면, 요소의 일부분을 잘라낼 수 있다.

• SCSS

&.arch {
  margin-top: 20vh;
  .picture {
    overflow: hidden;
    transition: 1s;
    clip-path: circle(20% at 50% 100%);
  }
}

• JS

gsap.to(element, {
  scrollTrigger: {
    trigger: element.parentElement,
    start: "0% 50%",
    end: "100% 80%",
  },
  'clip-path': 'circle(72.4% at 49% 51%)'
})

🖋 code review
* clip-path: circle(20% at 50% 100%); 에서 해당 스크롤 트리거에 도달했을 시, 'clip-path': 'circle(71.4% at 49% 51%)' 로 변환하여라.

👉 css clip-path maker 사이트 : https://bennettfeely.com/clippy/

▪️ 1-3) 루프 애니메이션

• JS

 gsap.to('.footer .txt-flow-area .link-home', 20, {xPercent:-100, repeat:-1, ease:'none',});

🖋 code review
* gsap.to('선택자',20,{xPercent:-100, repeat:-1, ease:'none',}) : 20초 동안 x축 방향 -100만큼 이동된 상태, -1방향으로 반복재생 하여라.

▪️ 1-4) data- 프로퍼티 활용

✔️ data- 프로퍼티
* 해당 요소에 사용자가 임의로 지정한 속성값을 활용할 수 있다. 이를 커스텀 데이터 속성(custom data attributes) 이라고 부르며, data- 를 앞에 붙여서 속성명을 지정하고 값을 부여한다.
* data- 프로퍼티의 DOM 접근 방식
-엘리먼트노드.dataset.새데이터셋속성이름 = "속성값";

👇 이렇게 사용해요! 👇

1. html 에 직접 속성값을 지정한다.

    2. JS

const stickerList = document.querySelectorAll('.sticker .sticker-icon');

  stickerList.forEach(element => {
    dataX = element.dataset.x;
    dataY = element.dataset.y;
    gsap.to(element, {
      scrollTrigger: {
        trigger: ".ppservice .sticker",
        start: "30% 100%",
        end: "100% 0%",
        scrub: 0.4,
      },
      xPercent: dataX,
      yPercent: dataY,
    })
  });

🖋 code review
* dataX = element.dataset.x; : 엘리먼트에서 dataset의 x값을 가지고 와라. (프로퍼티 접근 : 엘리먼트노드.dataset.새데이터셋속성이름 = "속성값";)
* xPercent:dataX : html에 지정해둔 data-x 값만큼 xPercent (지정된 x좌표값)만큼 움직여라.

---

2. 공통 레이아웃 scss 처리

• group-grid 레이아웃 영역

.group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  h3 {
    font-size: 3.5vw;
    line-height: 1.5;
    letter-spacing: -1px;
    word-break: keep-all;
    font-weight: bold;
  }
  .col-left {
    opacity: 0;
    transition: all 0.6s ease-out;
    h3 {
      margin-top: 4.5vw;
    }
  }
  .col-right {
    opacity: 0;
    transition: all 0.6s ease-out;
    padding-left: 7vw;
    h3 {
      margin-top: 13.5vw;
    }
  }
}

✅ Tips
메인, 서브에 걸쳐 재사용 할 수 있는 소형 레이아웃의 경우 scss 폴더를 별도로 만들어 관리하면 유지보수에 도움이 될 듯 하다.

---

3. javascript 헤더 스크롤 이벤트

✔️ 구현하고자 했던 효과
스크롤을 아래로 내렸을 시 헤더가 사라지고, 스크롤을 위로 올렸을 시 헤더가 나타나게끔
✔️ 구현하고자 했던 이유
유저 플로우를 고려했을 때, 스크롤을 내리는 동안에는 보편적으로 컨텐츠를 확인하기 위한 목적일 때가 많고, 다시 위로 올라갈 때는 다른 페이지로 넘어가기 위한 목적이 많으므로 위와 같이 설정키로 결정

• JS

let lastScroll = 0;
  const header = document.querySelector('.header');

  window.addEventListener('scroll', function() {
    const curr = window.pageYOffset || document.documentElement.scrollTop;
  
    if (curr > lastScroll) {
      header.classList.add('hide');
    } else {
      header.classList.remove('hide');
    }
    lastScroll = curr;
  });

🖋 code review
* curr = $(this).scrollTop(); : 현재 스크롤 위치
* let lastScroll = 0; : 스크롤 시작점 값 선언
* if (curr > lastScroll) { $('header').addClass('hide); } else { $('header').removeClass('hide'); } : 현재 스크롤 위치가 타겟 섹션에 도달하기까지의 스크롤 값과 같거나 크다면 header태그에 class hide 을 붙이고, 그게 아니라면 지운다.
* lastScroll = curr; : 값이 0인 lastScroll이 현재 스크롤 위치값(curr)과 동일하게 설정됐으므로, 스크롤이 조금이라도 내려가면 header태그에 class hide 가 붙고 아닐 시 class hide 가 없어진다.

---

🔥 PROJECT REVIEW

# 특징 : 반복되는 레이아웃이 굉장히 많은 프로젝트

위와 같은 이유로 scss에서의 마크업, 그리고 js 코드를 짤 때 좀 더 효율적인 방법을 찾으려고 노력했다. 대부분 forEach문을 활용하여 반복되는 코드를 줄였는데, 완성하고 난 뒤 떠오른 부분은 아쉬운대로 본 문서에 따로 정리해두었다.