Greensock Properties Cheat Sheet

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