0119 TIL ALL-CON devLog

오늘 한 일

• carousel button 위치 수정 + 모바일 점보트론 위치 수정✅
• 메인카카오 모달 background누르면 나갈 수 있게 수정✅
• GSAP(GreenSock Animation Platform) 사용해서 랜딩페이지 애니메이션 주기
• 랜딩 페이지- 스크롤 위치에 따라 설명 이미지들이 안보이다가 보이도록 애니메이션✅
• 랜딩 페이지 시연 사진 넣기✅
• 랜딩 페이지 전반적 css 수정 ✅

안썼지만 버리기 아까운 하루동안의 greensock 사용..

typescript를 쓰는 react에서 많이 사용하지는 않는 것 같아서 아쉽다.
공부했지만 안쓰기로 한 첫번째 이유는 어쩔때는 애니메이션이 먹히고 어쩔 때는 안먹힌다는 점이다. 아마 header부분에 scroll을 감지하는 코드가 있는데, 랜딩페이지에서도 스크롤을 감지해서
애니메이션이 나오는 부분이 있어서 그런게 아닐까 싶다. 로고를 누르면(재렌더링) 나오기는 하는데 안심할 수가 없었다. 그리고 tween.play()를 지워도 재생될 때도 있던데...ㅎ 두번째는 역시 급하게 호다닥 공부해서 그런지 원하는 그림이 나오지 않았다.

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

 let tween = gsap.from('.alignBox', {
    y: 200,
    scrollTrigger: {
      trigger: '.alignBox',
      toggleActions: 'restart none none none',
    },
    duration: 3,
    ease: 'elastic',
  });

  let tween2 = gsap.from('.alignBox2', {
    x: 2200,
    y: 0,
    scrollTrigger: {
      trigger: '.alignBox2',
      toggleActions: 'restart none none none',
    },
    opacity: 0,
    duration: 5,
    ease: 'elastic',
  });

  let tween3 = gsap.from('.alignBox3', {
    x: -200,
    scrollTrigger: {
      trigger: '.alignBox3',
      toggleActions: 'restart none none none',
    },
    duration: 3,
    ease: 'elastic',
  });

  let tween4 = gsap.from('#goBtn', {
    y: 100,
    scrollTrigger: {
      trigger: '#goBtn',
      toggleActions: 'restart none none none',
    },
    duration: 4,
    ease: 'elastic',
  });

  tween.play();
  tween2.play();
  tween3.play();
  tween4.play();

참고

찰떡이지만 js코드라 사용못한 참고 carousel 애니메이션
SCSS 애니메이션 예시