Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

MorphSVGPlugin.pathDataToBezier()

MorphSVGPlugin.pathDataToBezier( path:*, vars:Object ) : Array

Converts SVG <path> data into an array of cubic bezier points that can be fed into a MotionPathPlugin-based tween.

Parameters

path: *

The SVG path that should be converted. Can be a reference to an SVG <path>, a string selector ("#myPath") or raw path data ("M238.17,151.6c0,21.1-18.9, ...")

vars: Object

A config object containing optional properties that affect how the bezier points are plotted.

Returns : Array

An array of point objects with x and y properties. Example: [{x:0, y:100}, {x:200, y:400}].

Details

Converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a MotionPath-based tween.

Watch the video

Selecting the path to be converted

  1. //select path via string selector
  2. var bezier = MorphSVGPlugin.pathDataToBezier("#myPath");
  3. //or select path using DOM reference
  4. var myPath = document.getElementById("myPath");
  5. MorphSVGPlugin.pathDataToBezier(myPath);
  6. //or pass in a path string
  7. MorphSVGPlugin.pathDataToBezier("M37,17v15H14V17H37z M50,0H0v50h50V0z");

Adjusting points

The optional vars object recognizes a few properties that can adjust all the resulting points in the Bezier array:

  1. //each x value will be offset by 100 and each y by 200
  2. MorphSVGPlugin.pathDataToBezier(myPath, {offsetX: 100, offsetY: 200});
  3. //each value will be adjusted so that the #balloon element will be moved to the path
  4. MorphSVGPlugin.pathDataToBezier(myPath, {align: "#balloon"});
  5. //each point will use relative values which makes it easy to "move the path" to an SVG element.
  6. MorphSVGPlugin.pathDataToBezier(myPath, {align: "relative"});
  7. //resulting path will have points like "{x: "+=0", y: "+=200"}
  8. //transform the path using a matrix (rotate 45 degrees and move to right by 200px)
  9. MorphSVGPlugin.pathDataToBezier(myPath, {matrix: [0.7071, 0.7071, -0.7071, 0.7071, 200, 0]});

Don’t forget to always set type: "cubic" on your bezier tween, like:

  1. gsap.to("#id", {duration: 3, bezier: {values: MorphSVGPlugin.pathDataToBezier("#path", {align: "#id"}), type: "cubic"}});

Demo

Powered by Froala Editor

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×