InertiaPlugin allows you to smoothly glide any property to a stop, honoring an initial velocity as well as applying optional restrictions on the end value. You can define a specific end value or allow it to be chosen automatically based on the initial velocity and ease or you can define a max/min range or even an array of snap-to values that act as notches. InertiaPlugin even integrates VelocityTracker so that you can have it "watch" certain properties to keep track of their velocities for you and then use them automatically when you do a inertia tween. This is perfect for flick-scrolling or animating things as though they are being thrown (where momentum factors into the tween).
For example, let's say a user clicks and drags a ball and and then when released, the ball should continue flying at the same velocity as it was just moving (so that it appears seamless), and then glide to a rest. You can't do a normal tween because you don't know exactly where it should land or how long the tween should last (faster initial velocity would usually mean a longer duration). You'd like it to decelerate based on whatever ease you define in your tween (always use some sort of ease out, like "power1.out", "strong.out", etc.). Maybe you want the final resting value to always land within a particular range so that the ball doesn't fly off the edge of the screen. But you don't want it to suddenly jerk to a stop when it hits the edge of the screen either; instead, you want it to ease gently into place even if that means going past the landing spot briefly and easing back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth.
When you pair GreenSock's Draggable with InertiaPlugin, you get the ultimate tag-team for making a DOM element draggable, spinnable, tossable, and even flick-scrollable! You can impose bounds, complex snapping rules, and have things glide to a stop in a silky-smooth way, all with as little as one line of code! No kidding. Works great on touch devices too. Below you'll find 3 examples of what Draggable can do when it's got some InertiaPlugin love under the hood. Check out the code samples too (they auto-update as you change options).
Throw
By default, Draggable uses type:"x,y" meaning it'll use css transforms for positional movement (hardware accelerated when possible).
Activate the some of the snapping options below and watch how nicely things glide into place exactly on the grid or snap into place as you drag. Notice the edge resistance as you try
to drag past the edges; everything is configurable. [ View this on CodePen.io ]
- Options
Draggable.create(".box", {
type: "x,y",
edgeResistance: 0.65,
bounds: "#container",
inertia: true
});
Spin
Set Draggable's type to "rotation" and watch what happens (grab the knob below and spin it). InertiaPlugin tracks the velocity of the rotation and continues when you release your mouse (or finger for touch devices), gliding to a stop naturally. Activate the "Snap to 90-degree increments" option to see how easy it is to make it always land at certain rotational values without any jerking or awkwardness.
Draggable.create("#knob", {type: "rotation", inertia: true});
To learn how to include InertiaPlugin into your project, see the GSAP install docs.
Demos
-
5
Showcases
.png.fc7f258b568e575135fbb300dc15f43d.png)
Cook up some delightful animation today with a generous dose of GSAP.
- Team GreenSock
Recommended Comments
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now