GreenSock Docs (HTML5/JS)

RoughEase

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});

Constructor

RoughEase ;

Constructor

Properties

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.

Methods

config : RoughEase

Permits customization of the ease with various parameters.

getRatio : 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.

Get GSAP

Version: 1.20.3 updated 2017-10-02

Core

    Extras

      Plugins

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

        For an all-access pass to premium content

        Join Club GreenSock