Make SVG graphics play on entering window (scroll)

Question

I have a tough question! I have several SVG graphics on some of my pages which play when the page loads. But because many of them are below the fold, I would like them to start playing (and play once) when they scroll into view.

NOTE: I have searched everywhere for a solution and even hired a freelancer who couldn't make it work. The difference with my SVGs I think is that they use @keyframe and have more than one path that play in sequence which may be why other solutions do not work? The reason for more than one path is that it is a calligraphic arrow shape that overlaps when revealed by the SVG mask.

My HTML for one of the SVGs (inside a DIV to make it responsive):

I haven't posted any JS because none of the code I have tried works.

user_8583669 · Answer

You can achieve that by running the animation if the container #arrow-1id as a specific class (lets say .play). Then you just check with javascript when the container appear in the screen. When it's the case, just add the .play class to the container:

var body = document.getElementsByTagName("body")[0];
var div = document.getElementById("arrow-1id");

body.onscroll = function() {
  if (document.documentElement.scrollTop >= div.offsetTop - 200) {
    div.classList.add("play");
  }
};

body {
  height: 2000px;
}

#arrow-1id {
  margin-top: 400px;
  background-color: lightgrey;
}

.play #arrow1-mask1 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 265.809 265.809;
  stroke-dashoffset: 0;
  animation: brush1a 2s linear;
  animation-fill-mode: forwards;
}

.play #arrow1-mask2 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 499.444 499.444;
  stroke-dashoffset: 0;
  animation: brush1b 2s linear;
  animation-fill-mode: forwards;
}

.play #arrow1-mask3 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 396.144 396.144;
  stroke-dashoffset: 0;
  animation: brush1c 2s linear;
  animation-fill-mode: forwards;
}

.play #arrow1-mask4 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 195.971 195.971;
  stroke-dashoffset: 0;
  animation: brush1d 2s linear;
  animation-fill-mode: forwards;
}

@keyframes brush1a {
  0% {
    stroke-dashoffset: 265.809;
  }
  1% {
    stroke-dashoffset: 265.809;
  }
  20% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes brush1b {
  0% {
    stroke-dashoffset: 499.444;
  }
  20% {
    stroke-dashoffset: 499.444;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes brush1c {
  0% {
    stroke-dashoffset: 396.144;
  }
  60% {
    stroke-dashoffset: 396.144;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes brush1d {
  0% {
    stroke-dashoffset: 195.971;
  }
  80% {
    stroke-dashoffset: 195.971;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

user_13987068 · Answer

I tried this and it works but it seems only supported in Firefox, no other browser???

Make SVG graphics play on entering window (scroll)

2 Answers