Jump to content
GreenSock

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

| GreenSock
7071

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. Note that the video is using GSAP 2 format.

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" - tThe 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. 
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 CustomWiggle

Get CustomWiggle by creating a FREE GreenSock account which gets you access to our community forums plus you’ll receive our exclusive “GreenSock Insider” email series (you can unsubscribe anytime). Use the widget below to sign up (or if you’re already logged in, you’ll get immediate access to the download zip containing CustomWiggle). Note: CustomWiggle is not in the GitHub repository or CDN; it's only available for download at GreenSock.com.

  • Thanks 1

Get an all-access pass to premium plugins, offers, and more!

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock


User Feedback

Recommended Comments

There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×