MariusM

Fixed this by adding in css: #balloon { animation: anime 2s; opacity: 1; } @keyframes anime { 0% { opacity: 0; } 100% { opacity: 1; } }

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?

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>