Animating Elements Using the MotionPath Plugin

MotionPath is one of the new animation features in GSAP 3. This plugin allows you to turn any path from SVG into the motion path of your animated element.

Beginning of work:

1. Connecting gsap
2. Connecting MotionPathPlugin. It needs to be connected separately, since it is not part of the gsap kernel.

Next we create the html markup, in this example we need only 2 elements

.wrapper
    #title HELLO
    svg#svg(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2207.88 1961.02")
      path#path(xmlns="http://www.w3.org/2000/svg" d="M2207.46,1373.07c-371.14,588.18-1148.82,764.14-1737,393C-0.08,1469.16-140.85,847,156.06,376.47,393.59,0,891.3-112.58,1267.74,124.95,1568.89,315,1659,713.14,1469,1014.29c-152,240.92-470.56,313-711.48,161C564.75,1053.65,507.09,798.82,628.7,606.09,726,451.9,929.86,405.77,1084,503.06,1207.4,580.9,1244.3,744,1166.47,867.34,1104.2,966,973.73,995.54,875,933.27A169,169,0,0,1,822.3,700.14a135.22,135.22,0,0,1,186.51-42.2,108.17,108.17,0,0,1,33.76,149.21,86.54,86.54,0,0,1-119.37,27,69.23,69.23,0,0,1-21.61-95.49A55.38,55.38,0,0,1,978,721.38a44.31,44.31,0,0,1,13.83,61.12,35.45,35.45,0,0,1-48.89,11.06,28.36,28.36,0,0,1-8.85-39.11,22.69,22.69,0,0,1,31.29-7.08,18.15,18.15,0,0,1,5.66,25,14.52,14.52,0,0,1-20,4.53,11.61,11.61,0,0,1-3.62-16A9.29,9.29,0,0,1,960.2,758a7.43,7.43,0,0,1,2.32,10.25,6,6,0,0,1-8.2,1.86,4.76,4.76,0,0,1-1.48-6.56,3.81,3.81,0,0,1,5.25-1.19,3,3,0,0,1,1,4.2,2.44,2.44,0,0,1-3.36.76,2,2,0,0,1-.61-2.69" style="fill: none;stroke: #1d1d1b;stroke-miterlimit: 10")

1. #title – the title that will animate (it can be any element – text, image, block)
2. #svg – our svg element which contains path, which will be used as a motion path for animation. In our case, it is a spiral.

Next is our javasctipt code:

Go to your *.js file and register the plugin there gsap.registerPlugin(MotionPathPlugin);

gsap.registerPlugin(MotionPathPlugin);

We give the element an offset to center it relative to the line along which the animation will take place:

gsap.set("#title", {
  xPercent: -50,
  yPercent: -50,
  transformOrigin: "50% 50%"
})

And then the main animation of our element:

gsap.to ("# title", {
  duration: 5, // animation duration
  repeat: 10, // number of repetitions
  repeatDelay: 3, // delay between repetitions
  yoyo: true, // yo-yo effect (playing back and forth alternately
  scaleX: 0, // decrease the element along the X axis
  scaleY: 0, // decrease the element along the Y axis
  ease: "linear", // smooth animation function
  motionPath: { // motionPath plugin parameters
    path: "#path",
    align: '#path',
    autoRotate: true,
    start: 0,
    end: 1
  }
});

Now we’ll take a closer look at the parameters of the MotionPath plugin itself:

• path – the main parameter, the path of movement of the animated element, can be specified via id or the class of the path from svg existing on the page or set directly, for example:

motionPath:{
  path: 'M10 10 H 90 V 90 H 10 Z'
}

• align – sets the position binding of the animated element to path, optional parameter
• autoRotate – rotates the animated element regarding the path, optional parameter,
• start, end – accept numbers, set the start and end points of the animation, the default values are 0 and 1

Final result:

Additional features:

A useful feature of the MotionPath plugin is the use of the MotionPathHelper utility, which allows you to edit your path at its reference points directly in the browser. The utility is not part of the kernel and will require additional connection.

MotionPathHelper example:

Original path with the ability to edit at anchor points:

Modified path using the utility:

Conclusions

MotionPath is a powerful, flexible and easy-to-use tool that allows you to create complex and interesting animations, the only requirement of which is the presence of a path of any complexity.