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

웹 애니메이션을 위한 GSAP 가이드 Part.03

해결된 질문

작성

225

수정됨

안녕하세요. 강사님

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

아래 코드에서 반응형 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>

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

답변 2

범쌤

지식공유자

안녕하세요 wootae 님 😀

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

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

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

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

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

인프런 AI 인턴

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

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

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

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

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

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

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

인프런 커뮤니티 질문&답변

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