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

[MariusM]

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>

 

[Carl]

Hi and welcome to the GreenSock forums,

 

Yes, svg elements can follow an SVG path with the help of the MorphSVG plugin.

Please see if this helps: https://greensock.com/path-animation

 

Feel free to fork the demos and add your own svg code.

 

 

 

[MariusM]

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

 

[MariusM]

Fixed this by adding in css:

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

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

  100% {
    opacity: 1;
  }
}

 

[PointC]

It's best not to mix CSS animations with GSAP as a fight for control can result from that mix. When you use the Morph and Bezier plugins to have an element follow a path, you can quickly set the element to its starting position by using .progress(1).progress(0) before you start the animation.

 

When you're ready to add the amazing MorphSVG plugin (& many more) to your JS arsenal, be sure to check out Club GreenSock.

https://greensock.com/club

 

Happy tweening.