Skip to main content

CustomWiggle

Club GSAP plugin

Quick Start

Trial URL

CustomWiggle is a Club GSAP perk, join today or grab this trial URL to take it for a spin for free.  Works on localhost, Codepen, CodeSandbox and Stackblitz.

gsap.registerPlugin(CustomEase, CustomWiggle)

Minimal usage

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

Description​

CustomWiggle extends CustomEase (which you must include in your project as well), and it lets you set a wiggle amount and type.

Ease walkthrough

Demo​

CustomWiggle Types

loading...

Config Object​

    Property

    Description

  • wiggles

    Integer - The 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​

gsap.registerPlugin(CustomEase, CustomWiggle); // register

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

//Alternatively, make sure CustomWiggle is loaded and use GSAP's string ease format
ease: "wiggle(15)" //<-- easy!
ease: "wiggle({type:anticipate, wiggles:8})" //advanced

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.

Demo collection​

Contents