[미니 프로젝트] GSAP HTML 애니메이션 구현하기

팀 소개 미니프로젝트 메인페이지에 GSAP를 이용한 애니메이션을 사용하였다.
GSAP란(The GreenSock Animation Plattorm)의 약자로 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다.
미니프로젝터의 상단 'B-02','일단','버티조','이미지 사진'을 순차적으로 요소가 보이게 구현하였다.

// 나타날 요소(.fade-in)들을찾기
const fadeEls = document.querySelectorAll(".main-header__temp .fade-in");
// 요소들을 하나씩 반복해서 처리!
fadeEls.forEach(function (fadeEls, index) {
  gsap.to(fadeEls, 1, {
    delay: (index + 1) * 0.7,
    opacity: 1,
  });
});

• document 객체에서 querySelectorAll 메소드를 사용해 'main-header__temp'섹션 안의 모든 .fade-in 요소를 검색하고 fadEls 변수에 할당한다.
• 검색된 요소들은 forEach 메소드의 콜백 함수에서 gsap객체의 to 메소드를 사용해 애니메이션할 요소, 시간, 속성을 순서대로 작성한다.
• 결과 검색된 .fade-in 요소가 1초 동안 opacity: 1; 속성과 값으로 자연스럽게 전환된다.
  (여기서 dely 속성은 CSS속성이 아닌 GSAP 라이브러리에서 제공하는 속성으로, 몇 초 뒤에 애니메이션 처리를 할 것인지 '지연시간'을 지정한다.)
• 이때 .fade-in 요소의 지연 시간이 달라야 순차적으로 나타날테니 콜백 함수의 INDEX 매개변수를 활용해 값을 지정한다.

미니프로젝트의 중단의 멤버카드에는 스크롤 위치에따라 변하는 애니메이션을 구현하였다.

const spyEls = document.querySelectorAll("section.scroll-spy");
spyEls.forEach(function (spyEl) {
  new ScrollMagic.Scene({
    // 검사할 장면(Scene)을 추가
    triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
    triggerHook: 0.7, // 화면의 80% 지점에서 보여짐 여부 감시
  })
    .setClassToggle(spyEl, "show") // 요소가 화면에서 보이면 show 클래스 추가
    .addTo(new ScrollMagic.Controller()); // 컨트롤러에 장면을 할당(필수!!)
});

• querySelectorAll 메소드로 scroll-spy 클래스값을 가진 모든 섹션을 검색해 spyEls 변수에 할당한다.. 각 섹션을 forEach 메소드의 콜백 함수로 반복 처리한다.
• new 키워드의 생성자 함수를 사용하였다.
• Scene메소드의 경우, 감시할 장면의 솝션(속성)을 지정한다.
• triggerElement 옵션은 지정한 대상 요소(spyEl)를 감시해 위/아래로 스크롤할 때 대상 요소가 보이거나 보이지 않는지 파악한다.
• setClassToggle 메소드의 경우, 대상 요소(spyEl)가 화면에 보이면 지정한 클래스값(show)울 추가하고, 화면에 보이지 않으면 클래스값을 제거한다.
• addTO 메소드의 역할은, 라이브러리 내부 컨트롤러에 Scene 메소드로 지정한 장면(옵션)을 할당한다.

미니프로젝트의 하단의 좋아요 프로필사진 버튼 에는 시간에따라 상하로 움직이는 애니메이션을 구현하였다.

gsap.to("#member-section__like-btn1", 1.5, {
  delay: 1.7, // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정.
  y: 15, // 'transform : translateY(수치);`와 같음, 수직으로 얼마나 움직일지 설정.
  repeat: -1, // 몇 번 반복하는지를 설정, `-1`은 무한 반복.
  yoyo: true, // 한번 재생된 애니메이션을 다시 뒤로 재생.
  ease: Power1.easeInOut, // Easing 함수 적용.
});

• 앞서 사용했던 GSAP 라이브러리를 사용하여 .to() 메소드에서 요소,시간,속성(옵션)을 위와 같이 정리하였다.

미니프로젝트 주소 : https://yeolsss.github.io/mini-project/