Visit this CodePen for more: https://codepen.io/sadpandas/pen/xxbpKvz
const [currentScreen, setCurrentScreen] = React.useState(0);
return (
<React.Fragment>
<div>
<svg
className="theSvg"
width="156" height="600" viewBox="0 0 156 600" xmlns="http://www.w3.org/2000/svg">
<path
d={pathArray[currentScreen].path}
stroke={pathArray[currentScreen].strokeColor}
fill="none"
>
</path>
</svg>
</div>
<div>
<div>
<button onClick={()=> setCurrentScreen(0)}>0</button>
<button onClick={()=> setCurrentScreen(1)}>1</button>
<button onClick={()=> setCurrentScreen(2)}>2</button>
</div>
</div>
</React.Fragment>
In my experiment to animate SVG paths on button clicks, I've encountered issues with Firefox ignoring the transition effect. While it works flawlessly in Chrome, it seems that Firefox lacks support for this specific animation type.
Considering the limitations with Firefox, I am exploring alternatives to achieve the desired effect. One option could be utilizing the <animate> tag for morphing, but most examples I've come across involve static transforms rather than interactive triggers like button clicks. Given my need to leverage ReactJs for the solution, using jQuery or external packages is not ideal.
If possible, I prefer a workaround that doesn't require additional libraries, as this functionality is unique to a specific section of my application. Any insights or suggestions on how to tackle this issue would be highly valued. Thank you!