Lu Nelson lunelson

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:

	// ----
	// Sass (v3.3.14)
	// Compass (v1.0.3)
	// ----

	@mixin width($span: 1 1, $options: ()) {
	@include width-helper(map-merge((span: $span), $options)...);
	}

	@mixin width-helper($span: 1 1, $right: null, $left: null, $cycle: null, $out: null) {

	p.red red
	p.orange orange
	p.yellow yellow
	p.green green
	p.blue1 blue1
	p.blue2 blue2
	p.purple1 purple1
	p.purple2 purple2

	p.red red
	p.orange orange
	p.yellow yellow
	p.green green
	p.blue1 blue1
	p.blue2 blue2
	p.purple1 purple1
	p.purple2 purple2

	p.red red
	p.orange orange
	p.yellow yellow
	p.green green
	p.blue1 blue1
	p.blue2 blue2
	p.purple1 purple1
	p.purple2 purple2

	// ----
	// Sass (v3.4.13)
	// Compass (v1.0.3)
	// ----


	// theme mixin

	@mixin theme(
	// DEFAULTS

	// ----
	// Sass (v3.4.12)
	// Compass (v1.0.3)
	// ----

	//Generator
	@mixin theme-generator(
	$post__title: "",
	$post__subtitle: ""
	) {

	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console

	var ff = require('fixture-factory');
	var chance = require('chance').Chance();

	var user = {
	firstName: 'name.firstName',
	lastName: 'name.lastName',
	effName: function(f){ return f.firstName + 'FUCK'; },
	chancey: function() { return chance.string(); }
	};

	// require() some stuff from npm (like you were using browserify)
	// and then hit Run Code to run it on the right
	var genie = require('genie');

	var customer, template;

	template = {
	customers: {
	min: 2,
	max: 4,