scene 넘어갈때 애니메이션 효과에 문제가 발생했습니다.

아 이후에 달린 답글을 제가 못봤었네요.
잘 해결하셨다니 다행입니다^^
즐거운 하루하루 보내세요!

안녕하세요!

이제 완강을 향해 달려가고 있는데요 해당 깜빡임 부분이 나중 강의에서 언급이 되었었네요

해당 부분 듣고 다시 확인해본 결과 css에서 opacity: 0으로 설정이 안되어있었습니다. (선택자 우선순위 문제)

정말 간단한 문제였는데 직접 만들다보니까 강의에서는 쉽게 넘어갔는데 막상 해보니 안되는 부분이었어서 당황했던 것 같습니다.

좋은 강의 다시 한번 감사드립니다! 유튜브도 시간날때마다 보고 있는데 내용이 너무 좋아서 좀 당황스럽지만 어쨋든 완강 후에 다른것도 수강할 예정입니다. 

좋은 하루 되세요!

안녕하세요.

어쨋든 문제는 해결되었지만, 아무래도 enterNewScene 코드를 빼는건 임시방편이라고 생각되어 다시 나름대로 해결책을 찾아보았습니다.

→ 바로 위 댓글에서 말씀드린대로 scrollLoop(){} 함수에서 후반부 return문 실행되기 전에 console.log(enterNewScene) 그리고 console.log(currentScene) 두줄을 넣어서 확인해본 결과 씬(스크롤 섹션)이 넘어가는 경계부분 스크롤시에 로그창에서 currentScene 값은 추가(++) 되는데 enterNewScene 값은 true 로 나오는 현상을 발견했습니다. 

→ 이유는 정확히 모르겠지만 아마도 씬이 넘어가는 순간에서 scrollLoop()함수 안에 있는 document.body.setAttribute('id', `show-scene-${currentScene}`) 부분이 먼저 실행(return)되고 그다음에 마지막줄에 있는 playAnimation() 호출이 실행되서 이런 딜레이가 발생하는거라고 가정하고 document.body.setAttribute('id', `show-scene-${currentScene}`) 부분을 아예 playAnimation() 함수 안에 (변수 선언 바로 아래)에 넣어주었더니 딜레이가 없어졌습니다.

이렇게 해줘도 큰 문제가 없는지 조금 궁금하기도 하고 해서 댓글 남겼습니다.

빨리 비디오 처리랑 캔버스 부분 듣고 싶었는데 별거 아닌 문제에 너무 시간을 쓴건 아닌지 조금 후회되기도 하는데요, 강의 내용이 좋고 설명도 정말 자세하게 해주셔서 정말 많은 도움이 되고 있습니다! 감사합니다.

답변 감사드립니다!

말씀해주신  enterNewScene 부분을 콘솔 로그로 확인해봤는데요, 

playAnimation() 함수 아래쪽에

...

console.log(enterNewScene);

if (enterNewScene) return;

playAnimation(); 

이렇게 확인해보니까 스크롤 섹션이 넘어가는 경계부분에서 순간적으로 로그에 true가 출력되는 걸 발견했습니다 (1회).

그래서 if (enterNewScene) return; 부분을 제거해주니까 경게부분에서도 자연스럽게 애니메이션이 연결되었습니다! (깜빡임 현상 사라짐)

사실 강의를 끝까지 듣고 질문을 남겼어야 하는데,  문제를 정확히 알려주셔서 많은 도움이 되었습니다. 

좋은 하루 되세요!!   

씬이 바뀌는 순간 그런 현상이 발생되는데요,
scrollLoop 함수에서 새로운 씬에 진입한 순간
enterNewScene 변수의 값을 true로 설정하고

if (enterNewScene) return;
playAnimation();

이런 코드를 통해 새 씬에 진입했을 때는  playAnimation()의 실행을 막아주는 방법을 사용한 부분이 있는데요,
혹시 이 부분도 처리 해주셨을까요?

계속 수정이 안되면, 일단 해당 함수를 완성 소스에 있는 것으로 바꾸어 보시고 한번 테스트 해보시는걸 추천드리겠습니다^^

왠지 display:none 으로 되어있던 .sticky-elem들이 display:block 으로 바뀌는 과정에서 opacity 값을 무시하고 잠깐 나타나는 것 같은데요, 간단한 문제같은데 해결방법을 못찾아서 질문드렸습니다!