RoughEase

Ever wanted a more “gritty” transition like an opacity fade that flickers a bit or a position tween that jerks around before reaching its destination? Ever thought to yourself “smooth eases are for sissies”? If so, you’re gonna like RoughEase. It provides an easy way to get a rough, jagged effect, or you can also get an evenly-spaced back-and-forth movement if you prefer. Even taper at the ends.


Configuration

Configure the RoughEase by passing an object to the constructor or config() method with any of the following properties (all are optional):

  • 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: Linear.easeNone)
  • 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)
  • points : Number - the number of points to be plotted along the ease, making it jerk more or less frequently. (Default: 20)
  • clamp : Boolean - setting clamp to true 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 if clamp is true, but if it is false, 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).
  • 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")
  • randomize : Boolean - by default, the placement of points will be randomized (creating the roughness) but you can set randomize to false to make the points zig-zag evenly across the ease. Using this in conjunction with a taper value can create a nice effect. (Default: true)

View the docs here.

Sample code

//use defaults:
TweenLite.from("#box", 3, {opacity:0, ease:RoughEase.ease});

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

Want a sneak-peek at what GreenSock is doing to take easing to the next level? Check out this video.

Get GSAP

Version: 1.19.0 updated 2017-01-17

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Help support GreenSock by becoming a member

        Join Club GreenSock