lunelson/gsap-properties-cheat-sheet.md

## gsap-properties-cheat-sheet.md

      
    Raw
  

              gsap-properties-cheat-sheet.md
            
          
    Greensock CSS properties Cheat Sheet

I wrote this as a reference for myself because some of the property names are non-obvious, and there are a number of relevant special properties, and there is no central concise listing of them all in GSAP Docs, other than (in longer form) on the CSSPlugin page.
Standard CSS properties

...are all supported, with hyphenated-names becoming camelCaseNames. Non-animatable properties are also supported but they will be set at the beginning of the tween.
Special mentions:

opacity/autoAlpha: can be used interchangeably but when autoAlpha hits 0 it also sets visibility: hidden
className: animates class changes by determining all the rule differences automatically. Overwrites the class by default but can also add/remove if using the += or -= prefixes.
clearProps: a comma-delimited list of properties that you want to clear from element's inline styles when tween is over. Allows element to fall back to the stylesheet rules.
autoRound: true: rounds pixel values and zIndex to the closest integer during the tween, for browser performance. Can be disabled with autoRound: false. You can still use the RoundPropsPlugin for specific properties.
bezier: animate a property along a bezier path. See BezierPlugin for more info

2D Transform properties


rotation: equivalent of rotationZ. uses degrees but also supports radians if specified, e.g. rotation: '3rad'
directionalRotation: a suffix to any type of rotation value, to enforce the direction (_cw, _ccw, or _short). Can be combined with the "+=" or "-=" prefixes for relative values
scale: takes a decimal number value or percentage value as string (e.g. 0.5 or '50%')—also relative values (e.g. '+=0.2' or '-=10%')
scaleX: same format as scale
scaleY: same format as scale
skewX
skewY: defaults to greensock's 'compensated' skew which is more like what graphics apps produce; for css-native skew (more distorted) set CSSPlugin.defaultSkewType = 'simple' or use extra prop skewType:'simple'
x: pixel-based translatex()
y: pixel-based translatey()
xPercent: percent-based translatex()
yPercent: percent-based translatey()
nb. px (x) and % (xPercent) can be combined in one tween/set

3D Transform properties


rotationX
rotationY
rotationZ: identical to regular rotation
z: pixel-based translatez()
zPercent: percent-based translatez()
perspective
transformPerspective
set perspective() property of the parent element or the special transformPerspectiveprop of the element or globalCSSPlugin.defaultTransformPerspective`
transformOrigin: as with CSS, can be percentage ("50% 50%") or keyword("top", "left", "right", or "bottom")

SVG properties

Note: all CSS-stylable SVG properties may be animated, again with hyphenated-case becoming camelCase. See this list.
Special mentions:

smoothOrigin: transparently offsets position when changing transformOrigin, so that the apparent position of the element does not jump
svgOrigin: alternative to transformOrigin to specify a transform of SVG elements around a point in the <svg> canvas space rather than around each local space. Similar to if you transformed the entire SVG containing the elements, except you can isolate as many or few elements as you want

TODO: add information from here https://gist.github.com/legomushroom/7397561