[Does GSAP have a tool to make an SVG image track a path?]

Fixed this by adding in css:

#balloon {
  animation: anime 2s;
  opacity: 1;
}

@keyframes anime {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

 

[Does GSAP have a tool to make an SVG image track a path?]

I have mod your pen thank you  but what i have noticed that when the page first loads, the ballon for a split second starts at one location then jumps to the location from where it's moving. How to avoid this hump?

 

 

See the Pen EGjvrm by MariusZMM (@MariusZMM) on CodePen

 

[Does GSAP have a tool to make an SVG image track a path?]

In this code the RED box is tracking the path. I have various SVG images with much more information. So i'm struggling to get these images working into the below path. Does GSAP offer a tool for an SVG to track let's say the below path.

 

<svg width="500" height="300" style="border:2px solid #1eff00;">

    <!-- Line to track -->
    <path id="motionpath1" d="M70,100 C 0,300 300,300 400,200 C 520,70 120,-40 70,100" fill="none" stroke="#001aff"
      stroke-width="2" />
  
    <!-- Object -->
    <path d="M-12,12 h48 v-24 h-48 z" fill="red">
  
      <!-- Assign Object to tracking line -->
      <animateMotion dur="99s" repeatCount="indefinite" rotate="auto">
        <mpath xlink:href="#motionpath1" />
      </animateMotion>
  
    </path>
  
  </svg>