Jump to content

GreenSock Docs (HTML5/JS)


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):

Example code

//use the default values
TweenLite.from(element, 1, {opacity:0, ease:RoughEase.ease});

//or customize the configuration
TweenLite.to(element, 3, {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});
TweenLite.to(element1, 3, {y:300, ease:rough});
TweenLite.to(element2, 5, {x:500, ease:rough});


RoughEase( vars:* ) ;



ease : RoughEase

[static] The default ease instance which can be reused many times in various tweens in order to conserve memory and improve performance slightly compared to creating a new instance each time.


config( vars:Object ) : RoughEase

Permits customization of the ease with various parameters.

getRatio( p:Number ) : Number

[override] Translates the tween's progress ratio into the corresponding ease ratio.

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.