CustomWiggle

Included in GSAP core: No

Description

CustomWiggle is a variation of CustomEase that let’s you set the wiggle amount and type.

Demo: CustomWiggle Types

options

• wiggles (Integer) - number of oscillations back and forth. Default: 10

• type (String) “easeOut” | “easeInOut” | “anticipate” | “uniform” | “random” - the type (or style) of wiggle (see demo above). Default: “easeOut”

• amplitudeEase (Ease) - provides advanced control over the shape of the amplitude (y-axis in the ease visualizer). You define an ease that controls the amplitude’s progress from 1 toward 0 over the course of the tween. Defining an amplitudeEase (or timingEase) will override the “type” (think of the 5 “types” as convenient presets for amplitudeEase and timingEase combinations). See the example CodePen to play around and visualize how it works.

• timingEase (Ease) - provides advanced control over how the waves are plotted over time (x-axis in the ease visualizer). Defining an timingEase (or amplitudeEase) will override the “type” (think of the 5 “types” as convenient presets for amplitudeEase and timingEase combinations). See the example CodePen to play around and visualize how it works.

How do you control the strength of the wiggle (or how far it goes)? Simply by setting the tween property values themselves. For example, a wiggle to rotation:30 would be stronger than rotation:10. Remember that 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.
gsap.to(".class", {duration: 2, rotation: 30, ease: "myWiggle"});
//Create a 10-wiggle anticipation ease:
CustomWiggle.create("funWiggle", {wiggles: 10, type: "anticipate"});
gsap.to(".class", {duration: 2, rotation: 30, ease: "funWiggle"});

Wiggling isn’t just for “rotation”; you can use it for any property. For example, you could create a swarm effect by using just 2 randomized wiggle tweens on “x” and “y”, as demonstrated here.

Download CustomEase

You must have a GreenSock account which is completely free to set up. Plus it gets you access to our community forums (a fantastic place to learn and get your questions answered). Simply log into your GreenSock account and get it from the “Downloads” area of your Account Dashboard. Or use the widget at the bottom of the CustomEase page to sign up and get the CustomEase file. It’s in the “easing” directory.

Note: CustomEase is not in the GitHub repository or CDN; it’s only available for download at GreenSock.com.