Switch Array of SVG Component

[tatanka]

Hello everyone, I want to make some animations just like here: https://gsap.com/community/forums/topic/32504-loop-through-an-array-of-text-and-display-on-screen/?do=findComment&comment=175412&_rid=151858 but using Svg components. I basicaly want to switch between svg components instead of texts. 

My current work is here:  https://stackblitz.com/edit/stackblitz-starters-egrwn8?file=components%2FLogo%2Findex.tsx

 

Any help really appreciated!

[tatanka]

I found this solution maybe it helps anybody 

 

const array = ['svg-a', 'svg-b', 'svg-c'];

  useGSAP(
    () => {
      tl.current = gsap.timeline({ delay: 1.5 });
      array.forEach((item, index) => {
        tl.current
          .to(`.${array[index - 1]}`, {
            display: "none",
            duration: 0.1,
          })
          .to(`.${item}`, {
            display: "block",
            duration: 0.1,
          });
      });
    },
    { scope: container },
  );