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
camelCaseNames. Non-animatable properties are also supported but they will be set at the beginning of the tween.
autoAlpha: can be used interchangeably but when autoAlpha hits 0 it also sets
className: animates class changes by determining all the rule differences automatically. Overwrites the class by default but can also add/remove if using the
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.
directionalRotation: a suffix to any type of
rotationvalue, 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.
'50%')—also relative values (e.g.
scaleX: same format as
scaleY: same format as
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
translatey()nb. px (
x) and % (
xPercent) can be combined in one tween/set
3D Transform properties
rotationZ: identical to regular rotation
perspective()property of the parent element or the special transformPerspective
prop of the element or globalCSSPlugin.defaultTransformPerspective`
transformOrigin: as with CSS, can be percentage ("50% 50%") or keyword("top", "left", "right", or "bottom")
Note: all CSS-stylable SVG properties may be animated, again with
camelCase. See this list.
smoothOrigin: transparently offsets position when changing
transformOrigin, so that the apparent position of the element does not jump
svgOrigin: alternative to
transformOriginto 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