Performance concerns from creating a "GIF" by rapidly switching out SVG elements in the DOM

Question

I was wondering if I should be concerned about performance / any memory issues if I'm creating GIF-like effects by rapidly cycling between multiple SVG elements?

For the sake of resolution and to maintain accurate transparency I'm not using actual GIFs for this effect. Basically in React, I have an array of SVGs created like

const svg1 = () => { return <svg>...</svg> };
const svg2 = () => { return <svg>...</svg> };
...etc.

And to make the animation, I cycle through them, rendering only one at a given time.

I'm wondering if it's better to have all SVG elements already in the DOM and just modifying the opacity of each? And also for future reference, how I can benchmark this performance myself?

Answer 1

I encourage you to check this example of animating svgs using 'react-move' (animation library) and useTick (react hook) https://dev.to/tornord/how-to-create-animated-svg-using-react-296l. There is a useTick hook available in react functional components. You can use it to imitate a GIF like effect. Please check out this example with useTick https://reactpixi.org/hooks#usetick

As it comes to performance: I think it is better to loop through array of SVGs, because if you use opacity, then it means you will have to preload all SVGs at rendering the page. If you have plethora of those SVG elements that would be resource consuming on a client side when the page loads.