Jump to content
GreenSock

GreenSock Docs

SnapPlugin

Description

The SnapPlugin allows tweens to “snap” to the closest value in a given array or increment. It basically adds a modifier to any property that implements one of the following snapping behaviors to every value DURING the tween (live, not just to the end value).

For example:

  1. //snap to an increment:
  2. gsap.to(".class", {
  3. x: 1000,
  4. snap: {
  5. x: 20 //x snaps to the closest increment of 20 (0, 20, 40, 60, etc.)
  6. }
  7. });
  8. //snap to the closest value in an array:
  9. gsap.to(".class", {
  10. x: 1000,
  11. snap: {
  12. x: [0, 50, 150, 500] //x snaps to the closest value in this array
  13. }
  14. });
  15. //snap to a value in an array, but only when it's within a certain distance/radius of one of those values:
  16. gsap.to(".class", {
  17. x: 1000,
  18. snap: {
  19. x: {values: [0, 50, 150, 500], radius: 20} //x snaps to the closest value in the array but only when it's within 20 pixels of it.
  20. }
  21. });

You can define as many snap properties as you want.

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.
×