Jump to content
GreenSock

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

CustomWiggle.getSVGData()

CustomWiggle.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

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".

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.

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.
×