Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


CustomWiggle.create( ID:String, vars:Object ) : CustomWiggle

Create a wiggle ease by just adjusting a few parameters.


ID: String

An ID (name) that can be used to identify this CustomWiggle instance, like "shake".

vars: Object

A config object containing properties that affect how the ease is rendered (number of wiggles, distribution of wiggles).

Show More

Returns : CustomWiggle

Returns a new CustomWiggle instance


It's easy to create the perfect wiggle by just tweaking a few parameters. You control the strength of the wiggle (or how far it goes) by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember, an ease just controls the ratio of movement toward whatever value you supply for each property in your tween.

Sample code

//Create a wiggle with 6 oscillations (default type:"easeOut")
CustomWiggle.create("myWiggle", {wiggles:6});
//now use it in an ease. "rotation" will wiggle to 30 and back just as much in the opposite direction, ending where it began.
TweenMax.to(".class", 2, {rotation:30, ease:"myWiggle"});

//Create a 10-wiggle anticipation ease:
CustomWiggle.create("funWiggle", {wiggles:10, type:"anticipate"});
TweenMax.to(".class", 2, {rotation:30, ease:"funWiggle"});

Wiggle types

See the Pen CustomWiggle Demo : resized by GreenSock (@GreenSock) on CodePen.

CustomWiggle Playground

Edit the wiggles, type, amplitudeEase and timingEase values below:

See the Pen CustomWiggle Graph Playground (embed in docs) by GreenSock (@GreenSock) on CodePen.

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.