❮ Previous Next ❯

Custom Bounce

  • GSAP has CustomBounce function to create Custom Bounce easing . 

  • CustomBounce

    Overview

    GSAP already includes the classic "bounce" ease, but it’s fairly limited — you can’t adjust how bouncy it feels or create a realistic squash-and-stretch effect during impact. That’s where CustomBounce comes in.

    CustomBounce builds on CustomEase and allows you to generate fully customizable bounce effects — complete with synchronized scale squashes and stretches — using just a few parameters.

    Think of it as a smart wrapper that automatically creates multiple CustomEases (one for the bounce, one optionally for the squash/stretch) behind the scenes.

  • How It Works

    A regular "bounce" ease just moves up and down — but a realistic bounce has two parts:

    1. The bounce motion (y movement) — the object hits the ground, slows, and rebounds.

    2. The squash/stretch — as it hits, it briefly flattens (scaleX increases, scaleY decreases), then stretches as it lifts off again.

    CustomBounce makes syncing these two animations easy by auto-generating the corresponding squashing ease curve.

Setup 

gsap.registerPlugin(CustomEase, CustomBounce);

Create your bounce: 

CustomBounce.create("myBounce", {
  strength: 0.6,
  squash: 3,
  squashID: "myBounce-squash",
});

Then animate both position and scale simultaneously: 

// Bounce motion (y-axis)
gsap.from(".class", {
  duration: 2,
  y: -200,
  ease: "myBounce"
});

// Squash and stretch
gsap.to(".class", {
  duration: 2,
  scaleX: 1.4,
  scaleY: 0.6,
  ease: "myBounce-squash",
  transformOrigin: "center bottom",
});
  • Property Type Description Default
    strength Number (0–1) Controls how “bouncy” the motion feels. Higher = more bounces. 0.7
    endAtStart Boolean If true, the ease ends where it started — like jumping up and landing again. false
    squash Number Duration ratio of the squash between bounces (higher = longer squash). 0
    squashID String Custom ID for the squash/stretch ease. Defaults to "-squash". Auto-generated 

CustomBounce.create("hop", {
  strength: 0.6,
  squash: 2
});
// Squash ease ID will be "hop-squash"

Visualizing the Ease

You can render the easing curve visually using the .getSVGData() method, just like CustomEase: 

CustomBounce.create("myBounce", {
  strength: 0.6,
  squash: 3,
  squashID: "myBounce-squash",
});

// Draw the ease curve inside an SVG path
CustomEase.getSVGData("myBounce", {
  width: 500,
  height: 400,
  path: "#ease"
});

String Format Shortcut

You can define CustomBounce eases inline using string syntax too: 

ease: "bounce(0.5)" // simplified form
ease: "bounce({strength:0.5, endAtStart:true})" // full object format
❮ Previous Next ❯