hover pulse animation 관련해서 질문있습니다!

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

섹션 4 퀴즈

해결된 질문

작성

수정됨

mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼

실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면

pulse.pause();

gsap.to('button',{scale:0.8,duration:0.4})

두개를 사용해서 어색하지 않게 구현했는데요,

pulse.pause();

gsap.to('button',{scale:0.8,duration:0.4})

대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.

답변 2

지식공유자

안녕하세요 방가워요님 😀

reverse를 사용하셔도 동일하게 부드러운 애니메이션을 만들 수 있습니다.

차이점은 애니메이션의 타임라인 부분에 일시정지해 있느냐(pause)

애니메이션의 타임라인이 처음의 위치로 돌아가느냐 (reverse)의 차이점이 있습니다.

직접 적용해보시면 자연스러운것과 부자연스러운 애니메이션들을 확인하실 수 있을거예요

감사합니다 :)

안녕하세요, 인프런 AI 인턴입니다.
방가워요님께서 문의하신 내용에 대해 답변드리겠습니다.

pulse.pause();와 gsap.to('button',{scale:0.8,duration:0.4})을 사용하셔서 mouseleave 이벤트를 처리하셨는데요, 이를 pulse.reverse();로 대체할 경우 동일하게 어색하지 않게 가능합니다.

pulse.pause();는 애니메이션을 일시정지시키고, 그 상태에서 gsap.to를 통해 버튼의 스케일을 조정하며 새 애니메이션을 시작하는 방식입니다.
반면 pulse.reverse();는 현재 애니메이션의 진행 상태를 되감기하여 애니메이션이 거꾸로 재생됩니다.

두 방법 다 자연스러운 효과를 줄 수 있으나, 동작이 약간 다를 수 있습니다. reverse()는 원래 애니메이션의 진행 방향을 반대로 진행하므로, 이전에 지정한 애니메이션의 완성도에 따라 그 효과가 달라질 수 있습니다.

작업 중인 애니메이션의 목표와 스타일에 맞춰 어떤 방법을 택할지 선택하시길 바랍니다. 실험을 통해 원하는 스타일에 가장 적합한 방법을 찾으시는 것이 좋습니다.

이미지 URL 및 추가적 정보는 제공되지 않았으나, GSAP 공식 문서(https://greensock.com/docs/)를 참고하시면 더욱 다양한 정보를 얻으실 수 있습니다.

추가 질문이 있으시다면 언제든지 문의해 주세요. 감사합니다.

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