title: How to animate an svg along path with conditional pausing using animateMotion and ReactJs?
body: <p>I am trying to animate an svg element along an svg path, but it needs to pause multiple times at certain positions and continue when click a button.</p>
  <p>I made an svg path, here is the code</p>
  <pre><code>&lt;path d=&quot;M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4&quot; stroke='white' strokeDasharray=&quot;5, 5&quot; fill='transparent'&gt;&lt;/path&gt;
  </code></pre>
  <p>I have 5 stations in the path that I need to pause the animation when crossed.</p>
  <p>I come with a solution to split the svg path to portion and change the path <code>d</code> value everytime</p>
  <p>Here is the final code (sorry I can't post a full code snippet)</p>
  <pre><code>&lt;path d=&quot;M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4&quot; stroke='white' strokeDasharray=&quot;5, 5&quot; fill='transparent'&gt;&lt;/path&gt;
  &lt;path fill=&quot;none&quot; id=&quot;motionpath&quot; stroke=&quot;transparet&quot; d=&quot;M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25&quot;&gt;&lt;/path&gt;
  &lt;circle id=&quot;circle&quot; style={{ zIndex: 1500 }} cx=&quot;0&quot; cy=&quot;0&quot; r=&quot;5&quot; fill=&quot;red&quot;&gt;
                                              &lt;animateMotion
                                                  id=&quot;track_1&quot;
                                                  dur=&quot;3s&quot;
                                                  fill=&quot;freeze&quot;
                                                  additive=&quot;replace&quot;
                                                  accumulate=&quot;sum&quot;
                                                  repeatCount=&quot;5&quot;
                                                  path=&quot;M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25&quot;
                                              &gt;
                                              &lt;/animateMotion&gt;
                                          &lt;/circle&gt;
  </code></pre>
  <p>In the <code>componentDidMount()</code></p>
  <pre><code>async componentDidMount() {
       const svganim = this.getSvgById(&quot;svgObject&quot;);
       if (svganim) svganim.pauseAnimations();
       animateM = document.querySelector&lt;SVGAnimateTransformElement&gt;('#circle &gt; animateMotion');
  
      currentRepeatCount = 0;
      if (animateM) {
          animateM.addEventListener('repeatEvent', (e) =&gt; {
              currentRepeatCount += 1;
              if (svganim) {
                  svganim.pauseAnimations();
                  if (currentRepeatCount &lt; RepeatCount) {
                      if (this.state.selectedQuestionIndex === 1)
                          animateM?.setAttribute(&quot;path&quot;, &quot;M26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25&quot;);
                      if (this.state.selectedQuestionIndex === 2)
                          animateM?.setAttribute(&quot;path&quot;, &quot;M31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75&quot;);
                      if (this.state.selectedQuestionIndex === 3)
                          animateM?.setAttribute(&quot;path&quot;, &quot;M68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4&quot;);
                      if (this.state.selectedQuestionIndex === 4)
                          animateM?.setAttribute(&quot;path&quot;, &quot;M93.75 4&quot;)
  
                      animateM?.beginElement();
                  }
              }
  
          });
  </code></pre>
  <p>On the button click</p>
  <pre><code>var svganim = this.getSvgById(&quot;svgObject&quot;);
          if (svganim)
              svganim.unpauseAnimations();
  
          const animateM = document.querySelector&lt;SVGAnimateTransformElement&gt;('#circle &gt; animateMotion');
          if (currentRepeatCount === 0 &amp;&amp; animateM) {
              animateM.beginElement();
          } else if (currentRepeatCount === RepeatCount) {
              return void (0);
          } else {
              if (svganim)
                  svganim.unpauseAnimations();
          }
  </code></pre>
  <p>It's kind of working (the circle stops and resume) but the problem is that the svg circle jump at the end of each iteration and go back to its right position.</p>
  <p>Here is a working fiddle of the current problem, click the circle to animate it, the problem occurs at the end of each iteration <a href="https://jsfiddle.net/dj7mz2rp/" rel="nofollow noreferrer">https://jsfiddle.net/dj7mz2rp/</a></p>
  <p>Can you please help me with this?</p>