Jump to content
GreenSock

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

SnapPlugin

Sign in to follow this  

| GreenSock
444

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

Have you exercised your animation superpowers today? Go make us proud and tell us about it.

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

×