Motion along a Path

In notebook:
FrontEndMasters SVG Animation
Created at:
2016-11-21
Updated:
2016-11-21
Tags:
animation JavaScript libraries
Before it was done with SMIL, now with GSAP. 
  • Backwards compatibility and cross browser even IE! 
  • SMIL motion along a path will probably continue to be unsupported in IE, but support for this feature will move into CSS. However, this is down the line. In the meantime, use GSAP for the widest support.
In 2015, it was a transitional period, where it was not in SMIL anymore, but not yet in CSS. 
  TweenMax.to($firefly1, 6, {
bezier: {
  type:"soft", 
  values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, 
          {x:30, y:20}, {x:10, y:30}],
  autoRotate:true
},
ease:Linear.easeNone, repeat:-1}, "start+=3");
Curviness value

Can just use paths as general coordinates and smooth out the motion between (path has hard edges, but the movement moves in curves). 
You do this by setting the ​type​ parameter ​soft​. 
Or to have more control, set the ​type​ to ​thru​ and define a ​curviness​ value (0: no curviness, 1 is normal, 2. twice as curvy). 

Usually 2 is a good setting, more creates strange movements. Codepen
  function displayVals() {
    //get the value from the dropdown
    var singleValues = $("#single").val();
    //the timeline for the changing animation
    tl.to($('.s2'), 1.75, {
      rotation: 360,
      bezier: {
        type: 'thru',
        values: bezier,
        curviness: singleValues
      },
      ease: Power1.easeInOut
    });
  }
  displayVals();
You can also set ​autorotate:true​ so the object will also turn along the path.

Or, to have even more control with ​autoRotate​:
autoRotate: ["x","y","rotation",0,false]​
  • Position property 1 (typically "x")
  • Position property 2 (typically "y")
  • Rotational property (typically "rotation", but can also be “rotationX” or “rotationY”)
  • Number of degrees (or radians/Math.PI) to add to the new rotation at the onset (this is optional)
  • Boolean value indicating whether or not the rotational property should be defined in radians rather than degrees (default is false which results in degrees)