PhysicsProps
Quick Start
Trial URL
PhysicsPropsPlugin is a Club GSAP perk, join today or grab this trial URL to take it for a spin for free. Works on localhost, Codepen, CodeSandbox and Stackblitz.
gsap.registerPlugin(PhysicsPropsPlugin)
Minimal usage
gsap.to(obj, {
duration: 2,
physicsProps: {
x: { velocity: 100, acceleration: 200 },
y: { velocity: -200, friction: 0.1 },
},
});
Description
Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing.
Config Object
velocity
Number - The initial velocity of the object measured in units per second. Default:0
.acceleration
Number - The amount of acceleration applied to the object, measured in units per second. Default:0
.friction
Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like0.02
. Also note that friction requires more processing than physics tweens without any friction. Default:0
.
Property
Description
Usage
gsap.to(obj, {
duration: 2,
physicsProps: {
x: { velocity: 100, acceleration: 200 },
y: { velocity: -200, friction: 0.1 },
},
});
These parameters are not intended to be dynamically updateable. But one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction
and acceleration
are both completely optional):
PhysicsPropsPlugin is a Club GSAP membership benefit. You must have a valid membership to use this class without violating the terms of use. Visit the club page to sign up or get more details.
PhysicsPropsPlugin and other bonus plugins are not hosted on a CDN. Checkout our CDN FAQs for more info.
Demos
FAQ's
How do I include PhysicsPropsPlugin in my project?
See the installation page for all the options (CDN, NPM, download, etc.) where there's even an interactive helper that provides the necessary code. Easy peasy. Don't forget to register PhysicsPropsPlugin like this in your project:
gsap.registerPlugin(PhysicsPropsPlugin)
Is this included in the GSAP core?
Is this only for Club GSAP members?
Yes. It's our way of saying "Thank you" to those who support our efforts. If you're not a member, what are you waiting for? Satisfaction is guaranteed or your money back. Take your animation skills to the next level. If you're already a member, you can download GSAP along with this and the other bonus plugins from your account dashboard. See the installation page for details about how to get it into your project via a <script>
tag or NPM, Yarn, etc.
Can I try PhysicsPropsPlugin out for free?
You betcha! There's a trial (but fully-functional) version of PhysicsPropsPlugin that you can use on Codepen as much as you want for free. Get the URLs here. It's a fantastic way to experiment. Note: the trial version of the plugins will only work on the CodePen domain.
It works fine during development, but suddenly stops working in the production build! What do I do?
Your build tool is probably dropping the plugin when tree shaking and you forgot to register PhysicsPropsPlugin (which protects it from tree shaking). Just register the plugin like this:
gsap.registerPlugin(PhysicsPropsPlugin)