TechQA.

How to alternate-reverse loop an SVG animation?

3.5k views Asked by At

I am new to SVG specially in SVG animation so I don't know how to do this. I need to reverse the animation once it is finished and start it over again. I found this one How to reverse the moving direction of the SVG animation? and tried the accepted answer but I don't how to do it. Please help me guys. Heres my codes:

.s0 {
  overflow: visible;
}
.st0 {
  clip-path: url(#SVGID_6_);
  fill: #FF0500;
}
.st1 {
  opacity: 0.6;
  fill: #FF0500;
}
.st2 {
  clip-path: url(#SVGID_8_);
  fill: #FF0500;
}
.st3 {
  clip-path: url(#SVGID_2_);
  fill: none;
  stroke: #000000;
  stroke-width: 5;
  stroke-miterlimit: 10;
}
.st4 {
  clip-path: url(#SVGID_2_);
  fill: none;
  stroke: #000000;
  stroke-width: 5;
  stroke-linejoin: bevel;
  stroke-miterlimit: 10;
}
.st5 {
  opacity: 0.6;
  clip-path: url(#SVGID_4_);
}
.st6 {
  opacity: 0.7;
  clip-path: url(#SVGID_4_);
}
.st7 {
  clip-path: url(#SVGID_2_);
}
.st8 {
  clip-path: url(#SVGID_10_);
  fill: #FF0500;
}
.st9 {
  opacity: 0.65;
  fill: #FF0500;
}
.st10 {
  opacity: 0.7;
  fill: #FF0500;
}
.st11 {
  clip-path: url(#SVGID_2_);
  fill: #FFFFFF;
}
.st12 {
  opacity: 0.59;
  clip-path: url(#SVGID_4_);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="75px" height="100px" viewBox="0 0 75 100" xml:space="preserve" enable-background="new 0 0 75 100">
  <defs>
    <rect id="SVGID_1_" x="-121" y="-27.388" width="317.829" height="150.388" />
  </defs>
  <clipPath id="SVGID_2_">
    <use xlink:href="#SVGID_1_" overflow="visible" />
  </clipPath>
  <polygon class="st11" points="26.344 95.133 4.813 78.661 4.813 41.538 26.344 41.538 " />
  <polygon class="st3" points="26.344 95.133 4.813 78.661 4.813 41.538 26.344 41.538 " />
  <polygon class="st11" points="56.376 41.538 5.345 6.038 5.345 28.817 56.376 64.317 " />
  <polygon class="st4" points="56.376 41.538 5.345 6.038 5.345 28.817 56.376 64.317 " />
  <rect x="4.813" y="6.039" class="st11" width="67.095" height="22.779" />
  <rect x="4.813" y="41.539" class="st11" width="52.095" height="22.779" />
  <rect x="4.813" y="41.539" class="st3" width="52.095" height="22.779" />
  <rect x="10.545" y="69.081" class="st7" width="11.154" height="1.538" />
  <rect x="9.375" y="72.719" class="st7" width="13.071" height="1.538" />
  <rect x="10.334" y="76.247" class="st7" width="11.154" height="1.538" />
  <rect x="10.946" y="10.692" class="st7" width="1.538" height="13.07" />
  <rect x="14.476" y="11.851" class="st7" width="1.538" height="11.154" />
  <rect x="18.113" y="10.892" class="st7" width="1.538" height="13.071" />
  <rect x="21.643" y="12.052" class="st7" width="1.538" height="11.154" />
  <rect x="25.241" y="10.993" class="st7" width="1.538" height="13.071" />
  <rect x="28.771" y="12.153" class="st7" width="1.538" height="11.154" />
  <rect x="32.408" y="11.195" class="st7" width="1.538" height="13.071" />
  <rect x="35.938" y="12.355" class="st7" width="1.538" height="11.154" />
  <rect x="39.294" y="11.296" class="st7" width="1.539" height="13.071" />
  <rect x="42.824" y="12.456" class="st7" width="1.539" height="11.154" />
  <rect x="46.461" y="11.497" class="st7" width="1.538" height="13.071" />
  <rect x="49.991" y="12.657" class="st7" width="1.538" height="11.154" />
  <rect x="53.53" y="11.396" class="st7" width="1.538" height="13.071" />
  <rect x="57.059" y="12.557" class="st7" width="1.539" height="11.154" />
  <rect x="60.696" y="11.497" class="st7" width="1.538" height="13.071" />
  <rect x="64.226" y="12.758" class="st7" width="1.538" height="11.154" />
  <rect x="10.124" y="47.351" class="st7" width="1.538" height="11.154" />
  <rect x="13.76" y="46.393" class="st7" width="1.538" height="13.07" />
  <rect x="17.29" y="47.552" class="st7" width="1.538" height="11.154" />
  <rect x="26.898" y="26.956" transform="matrix(0.4983 0.867 -0.867 0.4983 42.4791 -7.5061)" class="st7" width="1.654" height="11.991" />
  <rect x="31.527" y="30.615" transform="matrix(0.4981 0.8671 -0.8671 0.4981 46.7432 -10.3986)" class="st7" width="1.654" height="9.125" />
  <rect x="36.135" y="33.386" transform="matrix(0.4981 0.8671 -0.8671 0.4981 51.2 -13.153)" class="st7" width="1.654" height="8.53" />
  <rect x="21.831" y="27.194" transform="matrix(0.4983 0.867 -0.867 0.4983 38.3092 -4.0545)" class="st7" width="1.654" height="7.76" />
  <rect x="41.997" y="37.781" transform="matrix(0.4983 0.867 -0.867 0.4983 56.1469 -17.0713)" class="st7" width="1.654" height="4.397" />
  <rect x="4.813" y="6.039" class="st3" width="67.095" height="22.779" />
  <rect x="20.889" y="47.552" class="st7" width="1.538" height="11.154" />
  <rect x="24.525" y="46.595" class="st7" width="1.538" height="13.07" />
  <rect x="28.055" y="47.754" class="st7" width="1.538" height="11.154" />
  <rect x="31.585" y="47.754" class="st7" width="1.538" height="11.154" />
  <rect x="35.168" y="46.594" class="st7" width="1.538" height="13.071" />
  <rect x="38.752" y="47.956" class="st7" width="1.538" height="11.154" />
  <rect x="42.109" y="47.956" class="st7" width="1.538" height="11.154" />
  <rect x="45.745" y="46.595" class="st7" width="1.538" height="13.07" />
  <rect x="49.275" y="47.956" class="st7" width="1.538" height="11.154" />
  <rect x="16.277" y="80.391" transform="matrix(-0.0035 1 -1 -0.0035 101.7282 67.8725)" class="st7" width="1.538" height="8.465" />
  <rect x="9.582" y="79.94" class="st7" width="13.071" height="1.537" />

  <!-- CLIPPINGS -->
  <defs>
    <!-- 1st -->
    <clipPath id="cliptop">
      <rect x="7" y="8" width="64" height="19" />
    </clipPath>

    <!-- 2nd -->
    <clipPath id="clip2">
      <polygon points="37.2,31 50.1,39.02 24,39.02 12.6,31" />
    </clipPath>

    <!-- 3rd -->
    <clipPath id="clip3">
      <rect width="47.6" height="17.75" x="7" y="44" fill="yellow" fill-opacity="0.9"></rect>
    </clipPath>

    <!-- Last -->
    <clipPath id="clip4">
      <polygon points="23.84 90.133 7.32 77.661 7.32 66.7 23.84 66.7 " fill="green" fill-opacity="0.8" />
    </clipPath>
  </defs>

  <!-- SCANNERS -->

  <!-- 1st -->
  <g class="st7" style="clip-path: url(#cliptop)">
    <defs>
      <rect id="SVGID_3_" x="-121" y="-27.388" width="317.829" height="150.388" />
    </defs>
    <clipPath id="SVGID_4_">
      <use xlink:href="#SVGID_3_" overflow="visible" />
    </clipPath>
    <g class="st5">
      <animateMotion id="scan_1_1" to="-64,0" begin="0s; scan_4_1.end + 1s" dur="1.5s" fill="freeze" />
      <defs>
        <rect id="SVGID_5_" x="59.452" y="8.488" width="7.473" height="17.88" />
      </defs>
      <clipPath id="SVGID_6_">
        <use xlink:href="#SVGID_5_" overflow="visible" />
      </clipPath>
      <rect x="59.451" y="8.488" class="st0" width="7.474" height="17.88" />
    </g>
    <g class="st12">
      <animateMotion id="scan_1_2" to="-64,0" begin="0s; scan_4_2.end + 1s" dur="1.5s" fill="freeze" />
      <defs>
        <rect id="SVGID_7_" x="61.938" y="8.488" width="7.473" height="17.88" />
      </defs>
      <clipPath id="SVGID_8_">
        <use xlink:href="#SVGID_7_" overflow="visible" />
      </clipPath>
      <rect x="61.937" y="8.488" class="st2" width="7.475" height="17.88" />
    </g>
    <g class="st6">
      <animateMotion id="scan_1_3" to="-64,0" begin="0s; scan_4_3.end + 1s" dur="1.5s" fill="freeze" />
      <defs>
        <rect id="SVGID_9_" x="60.695" y="8.488" width="7.473" height="17.88" />
      </defs>
      <clipPath id="SVGID_10_">
        <use xlink:href="#SVGID_9_" overflow="visible" />
      </clipPath>
      <rect x="60.694" y="8.488" class="st8" width="7.474" height="17.88" />
    </g>
  </g>

  <!-- 2nd -->
  <g class="st7" style="clip-path: url(#clip2)">
    <polygon class="st9" points="30.601 26.583 36.285 30.564 12.267 30.564 6.581 26.583 " y="-7">
      <animateMotion id="scan_2_1" to="17.75,12.5" dur="1s" begin="scan_1_1.end" fill="freeze" />
    </polygon>
    <polygon class="st9" points="31.814 27.352 37.5 31.333 13.481 31.333 7.795 27.352 " y="-7">
      <animateMotion id="scan_2_2" to="17.75,12.5" dur="1s" begin="scan_1_2.end" fill="freeze" />
    </polygon>
    <polygon class="st9" points="31.117 26.928 36.802 30.909 12.784 30.909 7.098 26.928 " y="-7">
      <animateMotion id="scan_2_3" to="17.75,12.5" dur="1s" begin="scan_1_3.end" fill="freeze" />
    </polygon>
  </g>

  <!-- 3rd -->
  <g class="st7" style="clip-path:url(#clip3);">
    <rect x="54.368" y="43.988" class="st1" width="7.474" height="17.88">
      <animateMotion id="scan_3_1" to="-57.5,0" dur="1.5s" begin="scan_2_1.end" fill="freeze" />
    </rect>
    <rect x="56.854" y="43.988" class="st10" width="7.475" height="17.88">
      <animateMotion id="scan_3_2" to="-57.5,0" dur="1.5s" begin="scan_2_2.end" fill="freeze" />
    </rect>
    <rect x="55.611" y="43.988" class="st10" width="7.474" height="17.88">
      <animateMotion id="scan_3_3" to="-57.5,0" dur="1.5s" begin="scan_2_3.end" fill="freeze" />
    </rect>
  </g>

  <!-- Last -->
  <g class="st7" style="clip-path:url(#clip4);">
    <rect x="7.324" y="59.351" class="st1" width="16.53" height="7.474">
      <animateMotion id="scan_4_1" to="0,33" dur="1.5s" begin="scan_3_1.end" fill="freeze" />
    </rect>
    <rect x="7.324" y="56.864" class="st10" width="16.53" height="7.475">
      <animateMotion id="scan_4_2" to="0,33" dur="1.5s" begin="scan_3_2.end" fill="freeze" />
    </rect>
    <rect x="7.324" y="58.107" class="st10" width="16.53" height="7.474">
      <animateMotion id="scan_4_3" to="0,33" dur="1.5s" begin="scan_3_3.end" fill="freeze" />
    </rect>
  </g>
</svg>

svg svg-animate
Original Q&A
1

There are 1 answers

0
Paul LeBeau On BEST ANSWER

That other question was describing how to make the animation run backwards, not alternate directions as you want to do.

SMIL animation doesn't include a way to automatically alternate the direction that an animation runs.

You need to specifically tell it to run to the end and then run back to the start again using something like:

keyPoints="0;1;0" keyTimes="0;0.5;1"

keyPoints 0 in an <animateMotion> means the start of the motion path, and 1 means the end of the motion path.

Related Questions in SVG

Related Questions in SVG-ANIMATE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions