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.

Edited by ZachSaucier

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

Join the Club

User Feedback

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.