Included in TweenMax: YESTweens any numeric attribute of a DOM element. For example, let's say your DOM element looks like this:
AttrPlugin is NOT intended to be used with css-related properties because the CSSPlugin already handles those. In the example above, if you specify
AttrPlugin will retain suffixes like "%", meaning you can tween values like
Note: a common mistake is to forget to wrap attributes in a
<rect id="rect" fill="none" x="0" y="0" width="500" height="400"></rect>You could tween the "x", "y", "width", or "height" attributes using AttrPlugin like this:
TweenLite.to("#rect", 1, {attr:{x:100, y:50, width:100, height:100}, ease:Linear.easeNone});You can tween an unlimited number of attributes simultaneously. Just use the associated property name inside the attr:{} object.AttrPlugin is NOT intended to be used with css-related properties because the CSSPlugin already handles those. In the example above, if you specify
x outside the attr:{} object, it would animate the CSS transform instead (as if you wanted to affect the translateX() of the CSS transform).AttrPlugin will retain suffixes like "%", meaning you can tween values like
<rect width="50%"...>. Caveat: it doesn't do unit conversion (like px to %), but that's rarely needed anyway.Note: a common mistake is to forget to wrap attributes in a
attr:{} object which is essential for specifying your intent.