GSAP GSAP Trick / TIL ~11.01 #2 첫 구상은 위와 같습니다. 각 content div는 relative position과 inline-block display를 통해 가로로 나열했습니다. 위의 gif 이미지를 보면 커서가 메뉴탭에 올라가면 글자가 떠오릅니다. buttonArea는 relative position으로 각 메뉴 탭을 기준으로 위치를 조정하도록 했고 커서와 관련된 동작 중엔 여러가지가 있는데, 이 이벤트에 대해 적... ReactGSAPGSAP ReactSVG에 애니메이션 넣어보기 ReactSVG에 viewBox를 조작하는 애니메이션을 넣어본다. 애니메이션을 사용하는 방법 여러가지가 있겠지만, 찾은것은 다음과 같다. class나 id를 가진 단순한 객체에게 단순한 애니메이션을 줄 때 매우 좋은 방법 View를 CSS에 넘겨버리는것이 JS를 깔끔하게 만든다고 생각하여, 기본적으로는 컴포넌트에 class만 지정하는 것으로 애니메이션을 적용하는것이 바람직하다고 생각함. 현재... trial and errorGSAPsvgReactSVGGSAP
GSAP Trick / TIL ~11.01 #2 첫 구상은 위와 같습니다. 각 content div는 relative position과 inline-block display를 통해 가로로 나열했습니다. 위의 gif 이미지를 보면 커서가 메뉴탭에 올라가면 글자가 떠오릅니다. buttonArea는 relative position으로 각 메뉴 탭을 기준으로 위치를 조정하도록 했고 커서와 관련된 동작 중엔 여러가지가 있는데, 이 이벤트에 대해 적... ReactGSAPGSAP ReactSVG에 애니메이션 넣어보기 ReactSVG에 viewBox를 조작하는 애니메이션을 넣어본다. 애니메이션을 사용하는 방법 여러가지가 있겠지만, 찾은것은 다음과 같다. class나 id를 가진 단순한 객체에게 단순한 애니메이션을 줄 때 매우 좋은 방법 View를 CSS에 넘겨버리는것이 JS를 깔끔하게 만든다고 생각하여, 기본적으로는 컴포넌트에 class만 지정하는 것으로 애니메이션을 적용하는것이 바람직하다고 생각함. 현재... trial and errorGSAPsvgReactSVGGSAP