update readme and add in gsap transforms:

Author: sdras

README.md

@@ -9,19 +9,19 @@ We'll be using CodePen for both the teaching demos and the homework so that we c
 _Password to all decks is WAW!_
 
 ## Slides:
-* [Introduction](http://slides.com/vlh/waw-intro?token=eE_f3_XU)
+* [Introduction](http://slides.com/vlh/sfintro?token=tnZ11s1p#/)
 * [Essentials of CSS animation](http://slides.com/vlh/waw-cssanimation?token=emxTzAcD)
 * [Basics of TweenMax & TimelineMax](http://slides.com/sdrasner/waw-gsap?token=rg606T3G)
 * [Classic animation principles worth stealing](https://www.slideshare.net/secret/1yK01w1F4bNpNz)
 * [SVG animation](http://slides.com/sdrasner/waw-svg-animation?token=D-wwuju5)
-
-## Further Slide Resources:
 * [Principles of UI/UX animation](http://slides.com/sdrasner/waw-principles-ux?token=258_EYo8)
 * [SVG workflow and optimization](http://slides.com/vlh/waw-svgworkflow?token=V4aSNC9y)
-* [The Web Animation API](http://slides.com/vlh/waw-waapi?token=wz6rRkTn)
 * [Web Animation Performance](http://slides.com/vlh/waw-webanimationperf?token=3xSwGsW5)
 * [Intro to Animating with React](http://slides.com/vlh/intro-anim-react?token=CNlmb06B#/)
+
+## Further Slide Resources:
 * [Animating with React cont.](http://slides.com/sdrasner/waw-react?token=Pmgv8l9k)
+* [The Web Animation API](http://slides.com/vlh/waw-waapi?token=wz6rRkTn)
 * [Mo.js](http://slides.com/sdrasner/svg-workshop-mojs?token=wAkiI-Pe)
 
 ## CodePen Collections:

gsap-cheatsheet.js

@@ -38,6 +38,31 @@ repeatDelay:n // delay in between iteration
 
 //-------------------------------------------------------
 
+// Transforms in GSAP
+// comments show CSS equivalent
+
+x: 100 // transform: translateX(100px)
+y: 100 // transform: translateY(100px)
+z: 100 // transform: translateZ(100px)
+// you do not need the null transform hack or hardware acceleration, it comes baked in with
+// force3d:true. If you want to unset this, force3d:false
+scale: 2 // transform: scale(2)
+scaleX: 2 // transform: scaleX(2)
+scaleY: 2 // transform: scaleY(2)
+scaleZ: 2 // transform: scaleZ(2)
+skew: 15 // transform: skew(15deg)
+skewX: 15 // transform: skewX(15deg)
+skewY: 15 // transform: skewY(15deg)
+skewZ: 15 // transform: skewZ(15deg)
+rotation: 180 // transform: rotate(180deg)
+rotationX: 180 // transform: rotateX(180deg)
+rotationY: 180 // transform: rotateY(180deg)
+rotationZ: 180 // transform: rotateZ(180deg)
+perspective: 1000 // transform: perspective(1000px)
+transformOrigin: '50% 50%' // transform-origin: 50% 50%
+
+//-------------------------------------------------------
+
 // DrawSVG
 // Use percentage, absolute values, or boolean