Jump to content
GreenSock

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

SnapPlugin

Sign in to follow this  

| GreenSock
4236

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

With great power comes great responsibility. Tween wisely.

- Team GreenSock
Sign in to follow this  


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

×