GreenSock Docs (HTML5/JS)

AttrPlugin

Included in TweenMax: YESTweens 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:
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.
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