Jump to content
GreenSock

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

CustomBounce

Sign in to follow this  

| GreenSock
5184

GSAP always had the tried-and-true "bounce" ease, but there was no way to customize how "bouncy" it was, nor could you get a synchronized squash and stretch effect during the bounce because:

  • The "bounce" ease needs to stick to the ground momentarily at the point of the bounce while the squashing occurs. Bounce.easeOut offers no such customization.
  • There was no way to create the corresponding [synchronized] scaleX/scaleY ease for the squashing/stretching. CustomEase solves this now, but it'd still be very difficult to manually draw that ease with all the points lined up in the right spots to match up with the bounces.

With CustomBounce, you can set a few parameters and it'll create BOTH CustomEases for you (one for the bounce, and one [optionally] for the squash/stretch). Think of CustomBounce like a wrapper that creates a CustomEase under the hood based on the variables you pass in. Note that this video uses GSAP 2's format.

Options

  • strength (Number) - A number between 0 and 1 that determines how "bouncy" the ease is, so 0.9 will have a lot more bounces than 0.3. Default: 0.7
  • endAtStart (Boolean) - If true, the ease will end back where it started, allowing you to get an effect like an object sitting on the ground, leaping into the air, and bouncing back down to a stop. Default: false
  • squash (Number) - Controls how long the squash should last (the gap between bounces, when it appears "stuck"). Typically 2 is a good number, but 4 (as an example) would make the squash longer in relation to the rest of the ease. Default: 0
  • squashID (String) - The ID that should be assigned to the squash ease. The default is whatever the ID of the bounce is plus "-squash" appended to the end. For example, CustomBounce.create("hop", {strength:0.6, squash:2}) would default to a squash ease ID of "hop-squash".

How do you get the bounce and the squash/stretch to work together? You'd use two tweens; one for the position ("y"), and the other for the scaleX/scaleY, with both running at the same time:

//Create a custom bounce ease:
CustomBounce.create("myBounce", {strength:0.6, squash:3, squashID:"myBounce-squash"});
//do the bounce by affecting the "y" property.
gsap.from(".class", {duration: 2, y:-200, ease:"myBounce"});
//and do the squash/stretch at the same time:
gsap.to(".class", {duration: 2, scaleX:140, scaleY:60, ease:"myBounce-squash", transformOrigin:"center bottom"});
 

See the Pen CustomBounce from GreenSock by GreenSock (@GreenSock) on CodePen.

Download CustomBounce

Get CustomBounce 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 CustomBounce). Note: CustomBounce is not in the GitHub repository or CDN; it's only available for download at GreenSock.com.

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

Join the Club

With great power comes great responsibility. Tween wisely.

- Team GreenSock
Sign in to follow this  


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...

×