An SVG <path> data string like "M0,0 C0,0 0.056,0.445 0.175,0.445 0.294,0.445 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0".
GreenSock Docs (HTML5/JS)
CustomBounce.getSVGData()
CustomBounce.getSVGData( ease:*, vars:Object ) : String
Calculates the SVG <path> data string for visualizing the supplied ease graphically.
Parameters
ease: *
The ease that should be visualized as an SVG path. Can be a reference to a CustomEase instance, a string ID of a CustomEase ("hop") or even a standard ease like Power2.easeOut.
vars: Object
A config object containing properties that affect how the ease is rendered, like width, height, x, y, etc. Typically it’s best to define at least a width and height (default is 100 for each). x and y default to 0.
Show More
Returns : String
Details
Calculates the SVG <path> data string for visualizing any ease graphically at any size that you define, like {width:500, height:400, x:10, y:50}. You can supply a CustomEase or the ID associated with one, or even a standard ease like Power2.easeOut. Feed in a path in the vars object and it'll populate its d attribute for you, like:
//create a CustomEase with an ID of "hop"
CustomEase.create("hop", "M0,0 C0,0 0.056,0.445 0.175,0.445 0.294,0.445 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0");
//draw the ease visually in the SVG that has an ID of "ease" at 500px by 400px:
CustomEase.getSVGData("hop", {width:500, height:400, path:"#ease"});Demo
Download CustomEase
You must have a GreenSock account which is completely free to set up. Plus it gets you access to our community forums (a fantastic place to learn and get your questions answered). Simply log into your GreenSock account and get it from the "Downloads" area of your Account Dashboard. Or use the widget at the bottom of the https://greensock.com/customease page to sign up and get the CustomEase file. It's in the "easing" directory. Note: CustomEase is not in the github repository or CDN; it's only available for download at GreenSock.com.