❮ Previous Next ❯

CustomWiggle in GSAP

  • CustomWiggle is a GSAP plugin that creates natural-looking wiggle or shake animations using custom easing curves.

    Instead of fake shaking using x: "+=10" repeatedly, CustomWiggle produces organic motion that feels real.

  • Why it matters

    • Looks more natural than CSS shake

    • Perfect for UI feedback

    • Saves time vs manual wiggle logic

    • Industry-standard motion technique

  • Real-World Use Cases

    • Login form error shake

    • Button attention animation

    • Notification icon wiggle

    • Playful micro-interactions

    • Cart validation feedback

  • . Detailed Explanation

    What is a Wiggle Animation?

    A wiggle animation:

    • Moves back and forth

    • Gradually settles down

    • Feels organic, not mechanical

Good wiggle 

Strong → Medium → Small → Stop

  • What Does CustomWiggle Do?

    CustomWiggle:

    • Generates a custom easing curve

    • That curve creates a wiggle effect

    • You apply it like a normal ease

Plugin Setup 

<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/CustomWiggle.min.js"></script>
gsap.registerPlugin(CustomWiggle);
  • OptionMeaning
    wigglesNumber of back-and-forth movements
    typeMotion style (easeOut, uniform, random)
    amplitudeEaseControls decay strength
  • TypeBehavior
    easeOutStarts strong, settles smoothly
    uniformEqual wiggle strength
    randomIrregular, playful motion

Basic Wiggle 

gsap.registerPlugin(CustomWiggle);

CustomWiggle.create("basicWiggle", {
  wiggles: 5,
  type: "easeOut"
});

gsap.to(".box", {
  x: 40,
  duration: 1,
  ease: "basicWiggle"
});

Real-World Button Error Shake 

CustomWiggle.create("errorWiggle", {
  wiggles: 8,
  type: "easeOut"
});

document.querySelector(".btn").addEventListener("click", () => {
  gsap.fromTo(".btn",
    { x: 0 },
    {
      x: 20,
      duration: 0.6,
      ease: "errorWiggle"
    }
  );
});
Lesson image
❮ Previous Next ❯