Jump to content
GreenSock

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

GreenSock Docs

RoundPropsPlugin

This plugin's functionality has been replaced with the improved SnapPlugin but is still included in GSAP's core for backwards compatibility reasons. We recommend using SnapPlugin instead for any new projects.

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...
gsap.to("#myID", {duration: 2, x: 300, y: 200, opacity: 0.5, roundProps: "x,y"});

Custom increments with object syntax {}

With the object syntax, you can round properties to various custom increments, not just integers! Simply pass in an object with [property]: [increment] pairs like so:
gsap.to(element, { duration: 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: RoundPropsPlugin leverages the same plumbing internally as the 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.
×