Animation of objects along an SVG path using GSAP and animateMotion in React JS

14 August 2021

In this blog, we are going to animate an object along an SVG path. We are going to achieve this via GSAP. Another way of doing this is the animateMotion element. We are going to discuss both one by one.

GSAP

The GreenSock Animation Platform (GSAP) can animate anything that JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery).  Visit the official website for details.

We will be animating a rectangular object on an SVG path in a React Js application.

First, we need to import gsap and MotionPathPlugin and then register the plugin.

import {MotionPathPlugin} from "gsap/MotionPathPlugin"; 

import gsap from 'gsap';  

gsap.registerPlugin(MotionPathPlugin);  /* register the MotionPath plugin */

We will be using the useEffect hook of the functional component to start the animation, as this will make sure that the node has been added to the DOM tree.

Our code will look something like –

useEffect(() => {

   gsap.to("#rect", {

       duration: 5,

       repeat: 12,

       repeatDelay: 3,

       yoyo: true,

       ease: "power1.inOut",

       motionPath:{

           path: "#path",

           align: "#path",

           autoRotate: true,

           alignOrigin: [0.5, 0.5]

       }

   });

}, []);

gsap.to()  -to define the destination values

Parameters: 

duration: The duration of the animation (in seconds). Default: 0.5

repeat: How many times the animation should repeat. Default: 0.

repeatDelay: wait time between repeats (in seconds). Default: 0

yoyo: If true, the object appears to go back and forth.

ease: change the rate of animation, giving it a specific feel. Check this link for a list of available options.

motionPath: The motionPath can be defined as an SVG <path> element like: motionPath: “#pathID”. Refer this link for the list of properties here.

After that, we need to render the SVG element and define the path and the rectangle object that will be animated along the path.

<svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg">                

 <path id="path" d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37" />                

 <g id="rect">                    

  <rect width="85" height="30" fill="dodgerblue" />                

 </g> 

</svg>

The above example should look like this

AnimateMotion Element:

The SVG <animateMotion> element lets define how an element moves along a motion path. We will need to define a path along which the object will move.

The path Attribute : It defines the path of the motion, it uses the same syntax as the d attribute.

For the list of animation attributes, check out this link

Example – You can refer the link for the below example

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">

  <path fill="none" stroke="lightgrey"

    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />




  <circle r="5" fill="red">

    <animateMotion dur="10s" repeatCount="indefinite"

      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  </circle>

</svg>

Pause, Play and Stop the animation:

We can use the SVG animation elements to pause, play and stop the animations.

endElement – To stop the animation.

beginElement – To start the animation.

pauseAnimations – Pauses all currently running animations.

unpauseAnimations – Unsuspends currently running animations.