js)스크롤 이벤트 + SVG <animate>

 

안녕하세요 찐망고입니다.

 

이전에 쓴 SVG애니메이션에 스크롤이벤트를 이용하여

원하는 스크롤 위치에서 SVG애니메이션이 진행되게 작업해 보려고 합니다.

 

이전글 참고

SVG Animate: stroke-dashoffset, SVG Gradient

 

 

<animate>를 먼저 걸어줍니다.

<svg viewBox="0 0 51 70" fill="none" xmlns="http://www.w3.org/2000/svg" id="svgani6">
<path d="M50.0004 52.9255V24.168H2.22266V52.9255H32.0746L40.0822 61.9457V43.3017H11.9705V34.2815H40.0822" stroke="red" stroke-width="2" stroke-dasharray="232" stroke-dashoffset="232">
  <animate attributeName="stroke-dashoffset" from="232" to="0" dur="3s" fill="freeze" class="svg-ani" />
</path>
</svg>

 

스크롤 관련 js를 추가합니다.

window.addEventListener("scroll", function() {
 const svgElement = document.querySelector("#svgani6");
 const rect = svgElement.getBoundingClientRect();

 if(rect.top < window.innerHeight && rect.bottom >= 0) {
   document.querySelector(".svg-ani").beginElement();
 }
})

// getBoundingClientRect(): 이 함수는 SVG 요소의 현재 위치를 계산합니다. 
// rect.top 값이 window.innerHeight보다 작아지면, 즉 SVG가 화면에 보이면 애니메이션이 시작됩니다.
// beginElement(): 이 메서드로 스크롤 시 애니메이션을 시작합니다.

 

 

만약 여러 SVG 요소들에게 적용을 시켜야 할 경우 반복문을 넣어주는 게 좋습니다.

window.addEventListener("scroll", function() {
	const svgElements = document.querySelectorAll("svg"); // 여러 개의 svg 요소 선택

    svgElements.forEach((svgElement, index) => {
      const rect = svgElement.getBoundingClientRect();

      // 조건을 만족하면 각각의 애니메이션을 실행
      if (rect.top < window.innerHeight && rect.bottom >= 0) {
        // 해당 SVG의 애니메이션 요소 선택 (animate요소)
        const animation = svgElement.querySelector("적용된요소선택"); 
        if (animation) {
          animation.beginElement(); // 애니메이션 시작
        }
      }
    });
});

 

 

 

<animate> 요소의 주요 속성

1. attributeName:
   • 어떤 SVG 속성을 애니메이션 할지를 지정합니다.
   • 예시: stroke-dashoffset, fill, opacity, transform 등.
2. from:
   • 애니메이션이 시작할 때의 속성 값을 지정합니다.
3. to:
   • 애니메이션이 끝날 때의 속성 값을 지정합니다.
4. dur (duration):
   • 애니메이션의 지속 시간을 지정합니다.
   • 예시: dur="3s"는 3초 동안 애니메이션이 진행됨을 나타냅니다.
5. repeatCount:
   • 애니메이션을 반복할 횟수를 설정합니다.
   • 값은 1(한 번만), 특정 숫자(반복 횟수), 또는 indefinite(무한 반복)으로 지정할 수 있습니다.
6. fill:
   • 애니메이션이 끝난 후 상태를 유지할지 여부를 결정합니다.
   • 기본값은 remove로, 애니메이션이 끝나면 속성 값이 원래대로 돌아갑니다.
   • freeze로 설정하면 애니메이션이 끝난 후에도 애니메이션의 마지막 상태가 유지됩니다.
7. begin:
   • 애니메이션이 언제 시작될지 설정합니다.
   • begin="0s"는 문서 로드 후 바로 애니메이션이 시작됨을 의미하며, 특정 이벤트에 연동되도록 click과 같은 값으로 설정할 수도 있습니다.

 

 

아래 예시를 확인해 보세요

아래 예시는 스크롤할 때 애니메이션이 처음 한 번만 실행되고, 이후에는 다시 실행되지 않습니다.

 

 

See the Pen js)스크롤이벤트+svg애니메이트 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.