Description
Tweens any numeric attribute of a DOM element. For example, let’s say your DOM element looks like this:
<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:
gsap.to("#rect", {duration: 1, attr: {x:100, y: 50, width: 100, height: 100}, ease: "linear"});
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.