如何在滚动时触发SVG动画？

Question

So I've finally cracked SVG animations (totally through cheating) and like most sites that use them if they're halfway down the page they begin automatically and you miss it, so how is it possible to trigger the animation on scroll to that div container?

Any help would be great,

Thanks!

Answer 1

You can use

beginElement() function to starts animations manually.

for this to work, you have to set the begin attribute of animate element to indefinite

a simple example would be something like

window.onscroll = function(){
  var anime= document.getElementsByTagName('animate')[0];
  // check for the amount of scroll
  anime.beginElement();
}

You could also make use of beginElementAt()

read more about svg Animation Timing Control

side note: Can't be more accurate since you haven't shared much info or code samples, and not sure what you meant by 'cheating'