inflearn logo
강의

Course
Instructor

GSAP Guide for Web Animation Part.03

반응형 관련해서 질문드립니다.

Resolved

559

작성자 없음

0 asked

1

안녕하세요. 강사님

강의 완강하고 반응형 작업을 테스트 해보던 중에 잘 풀리지 않는 점이 있어 문의 드립니다.

아래 코드에서 반응형 matchMedia 로 해상도 별로 나눠서 작업하려던 중에 pin이 끝나고 bottom 영역이 반쯤 올라왔을때 개발자모드에서 기기 툴바를 사용해 모바일 사이즈로 전환해 버리면 pin된 영역이 틀어지는 현상이 발생합니다. 이전 가로와 높이값을 그대로 유지하고... 원인과 이유를 알 수 있을까요?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <style>
        * {margin: 0; padding: 0;}
        .wrap {
            overflow: hidden;
        }
        .top {
            height: 400px;
        }
        .center {
            position: relative;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            background: purple;
        }
        .bg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            border-radius: 40px;
            background: yellow;
        }
        .bottom {
            height: 2000px;
            background: gray;
        }
        .box {
            width: 200px;
            height: 200px;
            background: orange;
        }
    </style>
</head>
<body>
   
<div class="wrap">
    <div class="top"></div>
    <div class="center">
        <div class="bg"></div>
    </div>
    <div class="bottom">
        <div class="box"></div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script>     
    ScrollTrigger.create({
        trigger: '.wrap .center',
        start: 'top top',
        end: "+=2000",
        animation: gsap.to('.wrap .bg', {width: '100%', height: '100%', borderRadius: 0}),
        pin: true,
        scrub: true,
        invalidateOnRefresh: true,
        markers: true,
    })

    const wrapper = document.querySelector('.wrap');
    const box = document.querySelector('.box');
    const mm = gsap.matchMedia(wrapper);

    mm.add('(max-width: 1024px)',()=>{
        gsap.to(box,{
            backgroundColor: '#000',
        })
        console.log('m');
    })

    mm.add('(min-width:1025px)',()=>{
        gsap.to(box,{
            rotation: 360,
            duration: 2,
            repeat: -1,
            ease:'none'
        })
        console.log('pc');
    })

    window.addEventListener('resize', ScrollTrigger.update)
//  window.addEventListener('resize', ScrollTrigger.refresh)
</script>
</body>
</html>

123.png456.png

javascript 애니메이션 인터랙티브-웹 gsap scrolltrigger

Answer 2

0

kindtiger

안녕하세요 wootae 님 😀

 

확인해보니 크롬 브라우저의 문제인 것으로 확인됩니다.

 

다른 브라우저 (파이어폭스)에서 확인한 결과 잘 작동합니다.

 

작업할 때 디바이스 툴을 사용하지 않고 창크기를 줄여서 본다면 동일하게 나오기 때문에 크게 문제가 없을것이라 생각됩니다.

 

이후 모바일 디바이스로도 확인해본 결과 문제 없이 잘 작동합니다.

 

제 강의를 완강 해주셔서 감사합니다 :)

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다.

wootae님의 질문은 반응형 디자인에서 GSAP와 ScrollTrigger를 사용하여 핀(pinned)된 영역이 반응형으로 동작하는 방법에 관한 것으로 보입니다. 특히, 반응형 디자인 시 matchMedia를 사용하여 해상도 별로 작업을 나누는 과정에서 발생하는 이슈를 해결하고자 합니다.

제공된 정보 중에서 직접적으로 동일한 상황(핀된 영역이 반응형으로 잘못 동작하는 문제)을 다루는 내용은 없으나, 반응형 디자인과 관련하여 GSAP의 ScrollTrigger를 사용하는 방법에 대해 일반적인 정보를 제공할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 여기서는 반응형 디자인과 관련된 답변을 찾을 수 없었으나, ScrollTrigger의 기본 활용 방법과 반응형 디자인에 대한 전반적인 이해를 돕는 내용은 다음과 같습니다.

질문자님이 언급한 문제에 대한 구체적인 해결 방법을 제공하는 것은 이 자리에서 직접적으로 가능하지 않으나, ScrollTrigger의 반응형 관련 공식 문서와 공식 포럼을 참조할 것을 추천드립니다. GSAP 공식 포럼에서는 다양한 사용 사례와 해결 방법이 공유되고 있으며, 커뮤니티 멤버들이 비슷한 문제를 해결하는 데 도움을 줄 수 있습니다.

또한, invalidateOnRefresh: true 옵션은 ScrollTrigger의 핀(pinned) 상태나 애니메이션 구성이 뷰포트 크기 변경에 따라 올바르게 새로 계산되도록 하는 기능입니다. 반응형 디자인에서 핀된 영역의 동작에 문제가 발생한다면, 이 옵션이 올바르게 설정되어 있는지 확인하고, 필요에 따라 ScrollTrigger의 refresh() 메서드를 호출하는 방법도 고려할 수 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

imagesLoaded에 관한 질문

0

19

2

섹션04 Layout에서 Mixed Layout파트의 실습 index.html파일 열었을때 선생님께서 보여주시는 가로스크롤이 안나타남.

0

87

3

안녕하세요 ScrollSmoother에 대해 질문드릴게요

1

203

2

GSAP 플러그인의 무료화 관련

2

225

3

barba와 ScrollSmoother 사용했을 때 스크롤 업데이트

0

110

2

barba.js 사용시 페이지이동

1

207

2

이상한 부분이 있어서 문의드립니다.

1

103

1

smooth-scrollbar 관련 질문

1

227

2

imagesLoaded 에 관해 질문드려요

1

107

1

scroll Draw SVG에서 실선이 아닌 점선으로 그리고 싶어요

1

186

1

파트 4 오픈 일정 문의

1

145

2

GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.

1

191

2

스무스 스크롤바 모바일에서 뻑뻑한 느낌이 들어요!

1

247

2

OneScroll Layout 질문 드립니다!

1

164

2

OneScroll Layout (1) 관련 재질문드립니다.

2

166

1

OneScroll Layout (1) 강의중 질문 드립니다.

1

269

1

이미지 엑박

1

189

1

UI관련 문의드립니다..!

1

238

2

OneScroll Layout 모바일 터치

1

471

2

노션 링크 보는 곳

1

387

1

ScrollTrigger의 end와 toggleClass

1

948

1

Text Effects(2)는 Text Effects(1)영상에 포함돼있는 것 같아요!

1

269

1

nav위에 마우스를 올리면 스크롤이 안돼요 😢

1

491

2

ScrollTrigger의 animation에 함수호출

1

451

1