6 asked

0

function init(){
    showDemo();
    awesome();
    tryNow();
}

const img = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');

const progressObj = {
    value: 0
};

// 초기 상태 명확히 설정
gsap.set(progressObj, { value: 0 });

if (loader) {
    loader.textContent = '0%';
}

const updateProgress = (instance) => {
    const targetProgress = Math.round(instance.progressedCount * 100 / img.length);

    gsap.to(progressObj, {
        value: targetProgress,
        duration: 0.4,
        ease: 'power1.out',
        overwrite: true,
        onUpdate: function() {
            loader.textContent = `${Math.round(progressObj.value)}%`;
        }
    });
}

imagesLoaded(img)
.on('progress', updateProgress)
.on('always', function(){
    gsap.to(progressObj, {
        value: 100,
        duration: 0.5,
        ease: 'power1.out',
        overwrite: true,
        onUpdate: function() {
            loader.textContent = `${Math.round(progressObj.value)}%`;
        },
        onComplete: function() {
            init();
        }
    });
})

위와 같이 수정했더니 0에서 100으로 순차적으로 로딩되는 것을 발견했습니다. 강사님의 코드에서는 왜 순차적으로 숫자가 변하지 않는걸까요??

0

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

JJJ님께서 언급하신 문제는 GSAP와 관련된 자바스크립트 애니메이션 실행 흐름에서 발생할 수 있는 일반적인 현상 일 수 있습니다. 숫자 카운팅이 예상치 않게 바로 100%로 넘어가 버리는 이유는 보통 애니메이션의 초기 상태 설정이나 이벤트 트리거링 설정에서 기인할 가능성이 큽니다.

올바른 구현을 위해 다음과 같은 점을 확인하고 조정해 보세요:

1. 초기 상태 설정: 카운트가 시작되는 지점(0%)이 정확히 초기화되어 있는지 확인합니다. GSAP의 fromTo() 기능을 활용하면 더욱 명확하게 초기 상태와 목표 상태를 설정할 수 있습니다.

2. GSAP 애니메이션 구성: .set() 메서드 등으로 초기 상태를 세팅하고 애니메이션 시작부에서 명확한 초깃값을 설정해 보세요.

3. 비동기적 로드 제어: 애니메이션이 실행될 때 필요한 리소스들이 모두 로드된 상태인지 확인해야 합니다. imagesLoaded 혹은 JS의 window.onload 이벤트를 사용하여, 모든 리소스 로딩 완료를 보장한 후 애니메이션을 시작하도록 제어할 수 있습니다.

유사한 문제에 대한 해결책은 “gsap 애니메이션 초기값 설정 문제 해결”에서 제공되었으니 참고해 보세요. 이 게시물에서는 애니메이션 시작 시 발생할 수 있는 불규칙한 동작을 피하기 위한 구체적인 설명과 해결방법을 소개합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.