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.