Jump to content

| GreenSock

If you'd like the inbetween values in a tween to always get snapped to the nearest value in a given array or increment, use the snap special property. Just pass in an object with the property that you want to snap and the value(s) that you want it to snap to. For example, if you're tweening the x, y, and alpha properties of an object and you want to snap the x and y values (not alpha) every time the tween is rendered, you could do something like this:

gsap.to(element, {duration: 2, x: 300, y: 200, alpha: 0.5, snap: {
  x: 50, // Snaps to the nearest incrememt of 50 (0, 50, 100, etc.)
  y: [10, 30, 70, 100, 150] // Snaps to the nearest value in the given array

Alternatively, have the tween snap only when it's within a certain range of given values:

gsap.to(".class", {
  x: 1000,
  snap: {
    // x snaps to the closest value in the array but only when it's within 20 pixels of it.
    x: {values: [0, 50, 150, 500], radius: 20} 

For more info, check out the SnapPlugin docs.

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

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock

User Feedback

Recommended Comments

There are no comments to display.

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 account

Sign in

Already have an account? Sign in here.

Sign In Now