d3 transition SVG polygon animation not smooth in Firefox

Question

I'm using d3 to animate an SVG polygon as follows...

https://jsfiddle.net/p6jy5t0n/35/

It's smooth on Chrome/Safari but horribly jerky on Firefox - the star even seems to dance around in terms of its positioning changing.

The code in question simply relies on chaining d3's transitions to make the star grow then shrink back to normal by increasing it's stroke-width...

d3.select(".svgStar").transition().duration(500).ease("easeElastic")
  .each("end",function(){
    d3.select(this).transition().duration(500).ease("easeElastic")
      .style("stroke-width","0.1px")
      .style("fill",starCol);
  })
  .style("stroke-width","2.5px")
  .style("fill","#fff400");

Any ideas what could be done to get a smoother transition in Firefox?

Answer 1

Have you tried with D3v5. The easeElastic behaves different in Chrome compared to D3v3.

Do you know what easeElastic does to the transition?

Try d3.easeLinear for comparision.

 function transformStar(){ var starCol = d3.select(".svgStar").style("fill"); var starAnimationDuration = 500; d3.select(".svgStar").style("stroke","rgb(255, 218, 93)"); d3.select(".svgStar") .transition().duration(starAnimationDuration).ease(d3.easeElastic) .style("stroke-width","2.5px") .style("fill","#fff400") .transition().duration(starAnimationDuration).ease(d3.easeElastic) .style("stroke-width","0.1px") .style("fill",starCol); } 

 <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <div id="container"> <svg> <g id="starG" style="transform:translateX(50px)"> <polygon class="svgStar" fill="#ffda5d" stroke="none" w="9" cursor="default" points="94,20 101,43 125,43 106,58 113,80 94,66 74,80 80,58 62,43 86,43" style="transform: translate(-94px, 18px);"> </polygon> <text x="0" y="74" id="starTxt" style="cursor: default; font-size: 12px; font-weight: bold; text-anchor: middle; fill: rgb(20, 171, 20); stroke-width: 0px;"> Go! </text> </g> </svg> </div> <button onclick="transformStar();"> Transform Star! </button>