CODEWITHSUNDEEP
javascriptjqueryhtmlcsssvg
user6190168
user6190168

Reputation:

Detecting when a SVG animation has ended

I have a SVG image inside my body tag that is being animated by the following code:

     <clipPath id="left-to-right">
     <rect x="0" y="0" width="0%" height="100%" >
         <animate attributeName="width" values="0%;100%" dur="5s" fill="freeze"/>
     </rect>
 </clipPath>

I'm adding the .svg to the body via an image tag like so:

<body>
 <div id="loading-container">
  <img id="silhoutte" src="Images/Silhoutte.svg">
 </div>
 <div id="content"> 
  /* Content in here */ 
 <div>
</body>

The svg is serving as a "loading" animation while i preload/cache some high resolution images before displaying the actual content.

My difficulty is in trying to detect the end of the SVG animation in order to reveal the content div. How would i go about detecting the animation if at all possible?

I'm open to suggestions on better ways to implement a web page loading screen using the animated SVG i created.

Thank you!

Upvotes: 4

Views: 4526

Answers (1)

Schlaus
Schlaus

Reputation: 19212

The SVG animation element should fire an endEvent once the animation is finished, so something like this should work:

document.querySelector('#left-to-right animate').addEventListener('endEvent', function() {
    console.log('Animation finished');
}, false);

Upvotes: 3

Related Questions