CustomWiggle

Included in TweenMax: NO

CustomWiggle extends CustomEase (think of it like a wrapper that creates a CustomEase under the hood based on the variables you pass in), allowing you to not only set the number of wiggles, but also the type of wiggle (there are 5 types; see demo below). Advanced users can even alter the plotting of the wiggle curves along either axis using amplitudeEase and timingEase special properties.

Demo: CustomWiggle Types

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

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

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.

Methods

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

Create a wiggle ease by just adjusting a few parameters.

get( ID:String ) : CustomEase

Gets the CustomEase instance associated with the ID provided.

getRatio( progress:Number ) : CustomEase

Converts a linear progress value (0-1) into the corresponding eased value.

getSVGData( ease:*, vars:Object ) : String

Calculates the SVG <path> data string for visualizing the supplied ease graphically.

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: 2.0.1 updated 2018-05-30

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