Jump to content
GreenSock

RoundPropsPlugin

Included in TweenMax: YES

Round any property to the nearest integer by simply passing a comma-delimited list of property names to roundProps like:

//rounds x and y to the closest integer throughout the tween...
TweenMax.to("#myID", 2, {x:300, y:200, opacity:0.5, roundProps:"x,y"});

Custom increments with object syntax {}

With the object syntax (in GSAP 1.20.5 and above), you can round properties to various custom increments, not just integers! Simply pass in an object with [property]:[increment] pairs like so:
TweenLite.to(element, 5, { x:600, y:100, roundProps:{    
    x:100, //round x to nearest increment of 100    
    y:0.1  //round y to nearest increment of 0.1  
  }
});

Video

Demo:

Note: as of GSAP 1.19.0, RoundPropsPlugin leverages the same plumbing internally as ModifiersPlugin (roundProps is just a modifier that applies Math.round()), thus you cannot do BOTH a modifier and roundProps on the same property in the same tween. It's easy to get that functionality, though, by just doing Math.round() inside your modifier function.

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