[SP2] 메인페이지 상단 두번째 섹션 애니메이션 #288

f0rever0 · 2023-11-17T05:09:28Z

Summary

close #283
디자이너 레퍼런스

2023-11-08.18.44.49.mov

Screenshot

데스크탑, 모바일 애니메이션 효과입니다.

2023-11-17.2.03.38.mov

Comment

scale은 디자이너에게 물어보고 수정이 필요하면 조정하겠습니다!

f0rever0 · 2023-11-17T13:01:47Z

디자이너와 논의 후 추가 작업 사항입니다. (논의 슬랙 스레드)

스크롤시 scale 0.9 -> 1.0 으로 변경되도록 비율 조정
768px이하일때 텍스트 컬러 애니메이션 변경( 왼쪽으로 그라데이션 되는게 아니라, 글씨 컬러가 전체적으로 바뀌기 )

2023-11-17.9.57.30.mov

f0rever0 · 2023-11-17T13:06:16Z

src/views/MainPage/components/Introduce/index.tsx

+  useEffect(() => {
+    const unsubscribe = scrollValue.on('change', (value) => {
+      setClipPathValue(`inset(0% ${value} 0% 0%)`);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [scrollValue]);


처음에는 아래와 같이 코드를 작성하였는데 이상하게 isMobileSize일때 clipPath Style 이 처음에는 정상적으로 'none'으로 적용되어있다가 스크롤을 하게 되면 clipPathValue 이 적용이 되더라고요...! opacity Style 은 화면 크기에 따라 정상적으로 스타일이 적용되던데... clipPath Style만 안되었습니다...!

이를 해결하기 위해 clipPathValue를 useMotionTemplate이 아니라 useState로 관리하니 정상적으로 작동이 되었습니다!
혹시 이부분에 대해 아신다면 알려주세요 😭 (2시간정도 삽질은 해봤는데 이유를 못찾았습니다....)

const scrollValue = useTransform(scrollYProgress, [1, 0.4], ['100%', '0%']); const opacityValue = useTransform(scrollYProgress, [1, 0.4], ['0%', '100%']); const scaleValue = useTransform(scrollYProgress, [1, 0.4], [0.9, 1]); const clipPathValue = useMotionTemplate`inset(0% ${scrollValue} 0% 0%)`; const content = '전국 최대 규모의 대학생 IT 연합 동아리, SOPT를 소개합니다.'; return ( <S.Background ref={contentRef}> <S.Wrapper> <S.Textcontainer style={{ scale: scaleValue }}> <S.MotionTitle style={{ clipPath: isMobileSize ? 'none' : clipPathValue, // 여기 코드가 문제 opacity: isMobileSize ? opacityValue : 1, }} data-text={content} /> <S.BackgroundTitle>{content}</S.BackgroundTitle> </S.Textcontainer> </S.Wrapper> </S.Background> ); }

이것은 아마 useIsMobile 훅의 문제인 것 같습니다 ... 모든 상황에서 꼭 제대로 동작하지는 않는 것 같아요
나중엔 모바일 ui랑 데탑 ui 코드를 아예 따로 써야 할 수도 있을 것 같아용

사실 모바일일 때는 저것을 사용하지 않는데 계속 clipPathValue를 들고 있는 것도 엄청 좋은 사례는 아닌 것 같습니다 ..!!!
저는 현재 코드 또한 모바일이랑 데탑이랑 나눠서 짠 후 조건부 렌더링하셔도 좋을 것 같아용

MotionTitle 부분만 따로 컴포넌트로 빼고, 백그라운드타이틀 부분은 그대로 칠드런으로 넘겨주면 현재 구조에서 크게 바뀌는 점 없을 것입니다!

음 그렇군요! useIsMobile 함수가 있는데 제대로 되지 않는거라면,, 아예 이 코드를 사용하지 않는 방안을 채택해야할 것 같네요!
useIsMobile 함수 작동에 대해 체크 해보고 새로 코드를 짜면서 구조도 다시한번 고민해볼게요!

solar3070 · 2023-11-21T07:27:42Z

src/views/MainPage/components/Introduce/index.tsx

-      <S.Title>전국 최대 규모의 대학생 IT 연합 동아리, SOPT를 소개합니다.</S.Title>
+    <S.Background ref={contentRef}>
+      <S.Wrapper>
+        <S.Textcontainer style={{ scale: scaleValue }}>


TextContainer로 해주시면 좋을 것 같습니다~!

확인 감사해요!!

solar3070 · 2023-11-21T07:51:19Z

src/views/MainPage/components/Introduce/index.tsx

+  const contentRef = useRef<HTMLElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: contentRef,
+    offset: ['end center', 'start start'],


comment;

'start start'같이 반복되는 경우 'start' 하나로 축약 가능하다고 합니다!!

오오 그렇군요!

solar3070 · 2023-11-21T08:12:25Z

src/views/MainPage/components/Introduce/MotionTitle/index.tsx

+        <S.MotionTitle
+          style={{
+            opacity: opacityValue,
+          }}
+          data-text={content}


짧아서 개행 없이 한 줄로 작성 가능할 거 같아요..! (지금은 eslint로 인해 style에 개행이 있어서 이렇게 된 것)

저는 cmd+S 누르면 자동으로 개행이 되는데 이런 부분이 있으면 제 로컬에서 eslint를 주석처리 하고 저장해서 커밋하면 되나요?!

현재 아래에 제시해준 코드로 수정해서 개행없이 <S.MotionTitle style={style} data-text={content} />; 이렇게 작성됩니다!
그래도 추후에 이런 상황에 어떻게 해야할지 궁금해요!!

style={{opacity: opacityValue, }}

이렇게 스타일 객체에서 opacity 개행을 없애고 cmd+s를 하면 아마 한줄로 바뀌었을 거예요!!

solar3070 · 2023-11-21T08:34:13Z

src/views/MainPage/components/Introduce/MotionTitle/index.tsx

+    const unsubscribe = scrollValue.on('change', (value) => {
+      const percentValue = Number(value.split('%')[0]);
+      isMobileSize
+        ? setOpacityValue((100 - percentValue) / 100)
+        : setClipPathValue(`inset(0% ${percentValue}% 0% 0%)`);
+    });


지금 상태를 두 개 사용하고 있는데 style 상태를 하나 만들어도 될 것 같아요

Suggested change

const unsubscribe = scrollValue.on('change', (value) => {

const percentValue = Number(value.split('%')[0]);

isMobileSize

? setOpacityValue((100 - percentValue) / 100)

: setClipPathValue(`inset(0% ${percentValue}% 0% 0%)`);

});

const unsubscribe = scrollValue.on('change', (value) => {

const percentValue = Number(value.split('%')[0]);

const newStyle = isMobileSize

? { opacity: (100 - percentValue) / 100 }

: { clipPath: `inset(0% ${percentValue}% 0% 0%)` };

setStyle(newStyle);

});

이렇게 하면 조건부 렌더링 없이 다음처럼 작성할 수 있을 것 같습니다..!!
<S.MotionTitle style={style} data-text={content} />

두개의 스타일을 분리하려고만 하다보니 하나의 스타일로 합치는걸 생각못했네요...! 좋은 의견 감사해요!!

SeojinSeojin · 2023-11-22T01:26:11Z

src/views/MainPage/components/Introduce/MotionTitle/index.tsx

+  content: string;
+}
+
+export default function MotionTitle({ contentRef, content }: MotionTitleProps) {


멋진 방법이네요 ..!!
저는 모바일/데탑에 대해 아예 다른 컴포넌트를 리턴하는 것을 생각하였는데,
요렇게 하는 거라면 useMotionTitle 훅을 만들어서 Introduce/index.tsx 에서 호출해서 사용해도 괜찮을 것 같다는 생각이 들었습니당
containerRef 받아서 style 을 리턴하는 형태가 생각됩니다!!
그러나 이대로도 좋습니다!

MotionTitle을 컴포넌트 말고, 훅으로 호출해서 사용하는 것의 이점이 있나요?!

feat : text scroll animation

662905a

f0rever0 requested review from SeojinSeojin and solar3070 November 17, 2023 05:09

f0rever0 self-assigned this Nov 17, 2023

pull-request-size bot added the size/M label Nov 17, 2023

f0rever0 added 6 commits November 17, 2023 20:41

feat : 모바일 애니메이션 변경

80cdfb2

feat : scale 비율 조정

b15d6be

feat : content margin 수정

42a8e97

fix : 안쓰는 style 삭제

9265c22

fix : content default opacity 삭제

644121f

feat : 모바일 clipPathValue 수정

cee1831

f0rever0 commented Nov 17, 2023

View reviewed changes

f0rever0 added 2 commits November 17, 2023 22:07

chore : 안쓰는 import 삭제

0d868bf

chore : Introduce 코드 구조 변경

b44aca9

pull-request-size bot added size/L and removed size/M labels Nov 20, 2023

solar3070 approved these changes Nov 21, 2023

View reviewed changes

f0rever0 added 3 commits November 21, 2023 23:08

feat : 모바일 max-width 변경

496d394

chore : MotionTitle 하나의 style로 관리

1f73f38

chore : 컴포넌트 명 대소문자 수정

eb30cb2

SeojinSeojin reviewed Nov 22, 2023

View reviewed changes

SeojinSeojin approved these changes Nov 22, 2023

View reviewed changes

Merge branch 'develop' into feat/#283-main-introudce-animation

c56985e

f0rever0 merged commit 1d7970d into develop Nov 22, 2023
1 check passed

f0rever0 deleted the feat/#283-main-introudce-animation branch November 22, 2023 06:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SP2] 메인페이지 상단 두번째 섹션 애니메이션 #288

[SP2] 메인페이지 상단 두번째 섹션 애니메이션 #288

f0rever0 commented Nov 17, 2023

f0rever0 commented Nov 17, 2023

f0rever0 Nov 17, 2023

SeojinSeojin Nov 19, 2023

SeojinSeojin Nov 19, 2023

f0rever0 Nov 19, 2023 •

edited

Loading

solar3070 Nov 21, 2023

f0rever0 Nov 21, 2023

solar3070 Nov 21, 2023

f0rever0 Nov 21, 2023

solar3070 Nov 21, 2023

f0rever0 Nov 21, 2023

f0rever0 Nov 21, 2023 •

edited

Loading

solar3070 Nov 22, 2023

solar3070 Nov 21, 2023

f0rever0 Nov 21, 2023

SeojinSeojin Nov 22, 2023 •

edited

Loading

f0rever0 Nov 22, 2023

[SP2] 메인페이지 상단 두번째 섹션 애니메이션 #288

[SP2] 메인페이지 상단 두번째 섹션 애니메이션 #288

Conversation

f0rever0 commented Nov 17, 2023

Summary

Screenshot

Comment

f0rever0 commented Nov 17, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f0rever0 Nov 19, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f0rever0 Nov 21, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SeojinSeojin Nov 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

f0rever0 Nov 19, 2023 •

edited

Loading

f0rever0 Nov 21, 2023 •

edited

Loading

SeojinSeojin Nov 22, 2023 •

edited

Loading