Included in GSAP core: No
Description
Most easing equations give a smooth, gradual transition between the start and end values, but RoughEase
provides an easy way to get a rough, jagged effect instead, or you can also get an evenly-spaced back-and-forth movement if you prefer. Configure the RoughEase
by passing an object to the constructor or config()
method with any of the following properties (all are optional):
-
clamp
: Boolean - settingclamp
totrue
will prevent points from exceeding the end value or dropping below the starting value. For example, if you’re tweening the x property from 0 to 100, the RoughEase would force all random points to stay between 0 and 100 ifclamp
istrue
, but if it isfalse
, x could potentially jump above 100 or below 0 at some point during the tween (it would always end at 100 though in this example) (Default:false
). -
points
: Number - the number of points to be plotted along the ease, making it jerk more or less frequently. (Default:20
) -
randomize
: Boolean - by default, the placement of points will be randomized (creating the roughness) but you can setrandomize
tofalse
to make the points zig-zag evenly across the ease. Using this in conjunction with ataper
value can create a nice effect. (Default:true
) -
strength
: Number - controls how far from the template ease the points are allowed to wander (a small number like 0.1 keeps it very close to the template ease whereas a larger number like 5 creates much bigger variations). (Default:1
) -
taper
: String - ("in"
|"out"
|"both"
|"none"
) - to make the strength of the roughness taper towards the end or beginning or both, use"out"
,"in"
, or"both"
respectively. (Default:"none"
) -
template
: Ease - an ease that should be used as a template, like a general guide. The RoughEase will plot points that wander from that template. You can use this to influence the general shape of the RoughEase. (Default:"none"
)
Example code
//use the default values
gsap.from(element, {duration: 1, opacity: 0, ease: "RoughEase.ease"});
//or customize the configuration
gsap.to(element, {duration: 2, y: 300, ease: 'RoughEase.ease.config({strength: 3, points: 50, template: "Strong.easeInOut", taper: "both", randomize: false'}) });
//or create a RoughEase that we can pass in to multiple tweens later
var rough = new RoughEase({strength: 3, points: 50, template: "Strong.easeInOut", taper: "both", randomize: false});
gsap.to(element1, {duration: 3, y: 300, ease: rough});
gsap.to(element2, {duration: 5, x: 500, ease: rough});
Powered by Froala Editor