Jump to content
GreenSock

GreenSock Docs

RoughEase

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

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

  • 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

  1. //use the default values
  2. gsap.from(element, {duration: 1, opacity: 0, ease: "RoughEase.ease"});
  3. //or customize the configuration
  4. gsap.to(element, {duration: 2, y: 300, ease: 'RoughEase.ease.config({strength: 3, points: 50, template: "Strong.easeInOut", taper: "both", randomize: false'}) });
  5. //or create a RoughEase that we can pass in to multiple tweens later
  6. var rough = new RoughEase({strength: 3, points: 50, template: "Strong.easeInOut", taper: "both", randomize: false});
  7. gsap.to(element1, {duration: 3, y: 300, ease: rough});
  8. gsap.to(element2, {duration: 5, x: 500, ease: rough});

Powered by Froala Editor

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