GreenSock Docs (HTML5/JS)

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.

Get GSAP

Version: 2.0.1 updated 2018-05-30

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock