huytrq · August 13, 2020 10:28 · Jul 3, 2015 · Jul 2, 2015 · Jul 2, 2015 · Jun 28, 2015
diff --git a/gsap-properties-cheat-sheet.md b/gsap-properties-cheat-sheet.md
@@ -49,3 +49,5 @@ 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
diff --git a/gsap-properties-cheat-sheet.md b/gsap-properties-cheat-sheet.md
@@ -18,7 +18,7 @@ Special mentions:
 
 * `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'`
+* `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`

diff --git a/gsap-properties-cheat-sheet.md b/gsap-properties-cheat-sheet.md
@@ -1,6 +1,6 @@
 ## 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](https://greensock.com/CSSPlugin).
+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](https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/).
 
 ### Standard CSS properties
 
@@ -18,9 +18,9 @@ Special mentions:
 
 * `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`
-* `scaleX`
-* `scaleY`
+* `scale`: takes a decimal number value or percentage value as string (e.g. `0.5` or `'50%'`)—also relative values e.g. `'+=0.2'`
+* `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()`

diff --git a/gsap-properties-cheat-sheet.md b/gsap-properties-cheat-sheet.md
@@ -1,6 +1,6 @@
 ## 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 (longwindedly) on the [CSSPlugin page](https://greensock.com/CSSPlugin).
+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](https://greensock.com/CSSPlugin).
 
 ### Standard CSS properties
 

diff --git a/gsap-properties-cheat-sheet.md b/gsap-properties-cheat-sheet.md
@@ -1,3 +1,5 @@
+## 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 (longwindedly) on the [CSSPlugin page](https://greensock.com/CSSPlugin).
 
 ### Standard CSS properties

diff --git a/gsap-properties-cheat-sheet.md b/gsap-properties-cheat-sheet.md
@@ -38,12 +38,12 @@ Special mentions:
 * `transformPerspective`
     set `perspective()` property of the parent element or the special transformPerspective` prop of the element or global `CSSPlugin.defaultTransformPerspective`
 * `transformOrigin`: as with CSS, can be percentage ("50% 50%") or keyword("top", "left", "right", or "bottom")
-* `smoothOrigin` (for SVG only?): transparently offsets position when changing `transformOrigin`, so that the apparent position of the element does not jump
 
 ### SVG properties
 
 Note: all CSS-stylable SVG properties may be animated, again with `hyphenated-case` becoming `camelCase`. See [this list](http://www.w3.org/TR/SVG/propidx.html).
 
 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
diff --git a/gistfile1.txt → gsap-properties-cheat-sheet.md b/gistfile1.txt → gsap-properties-cheat-sheet.md
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,49 @@
+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 (longwindedly) on the [CSSPlugin page](https://greensock.com/CSSPlugin).
+
+### 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](https://greensock.com/BezierPlugin-JS) 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`
+* `scaleX`
+* `scaleY`
+* `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 transformPerspective` prop of the element or global `CSSPlugin.defaultTransformPerspective`
+* `transformOrigin`: as with CSS, can be percentage ("50% 50%") or keyword("top", "left", "right", or "bottom")
+* `smoothOrigin` (for SVG only?): transparently offsets position when changing `transformOrigin`, so that the apparent position of the element does not jump
+
+### SVG properties
+
+Note: all CSS-stylable SVG properties may be animated, again with `hyphenated-case` becoming `camelCase`. See [this list](http://www.w3.org/TR/SVG/propidx.html).
+
+Special mentions:
+
+* `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
No results found