Davo Galavotti davo

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:

A test of textures.js that shows one approach for having independent scales for color and texture.

This ended up being more code than expected, because each (color, texture) combination needs to be defined independently. This is because each texture ends up as an SVG def, whose color properties (fill, stroke) cannot be changed per mark. Each (color, texture) pair must exist globally, then be applied to each mark.

	AbortDocumentVersionUpload
	AbortEnvironmentUpdate
	AbortMultipartUpload
	AbortVaultLock
	AcceptAccountMapping
	AcceptCertificateTransfer
	AcceptDelegate
	AcceptDirectConnectGatewayAssociationProposal
	AcceptFxPaymentCurrencyTermsAndConditions
	AcceptHandshake

	import * as React from "react"
	import { Frame, addPropertyControls, ControlType } from "framer"

	type Props = {
	width: number \| string
	height: number \| string
	color: string
	}

	export const SvgComponent = (props: Props) => {

	import React, { Component, useCallback, useState, useRef } from "react";
	import "./App.css";

	const imgUrl = require("./assets/iPhone-XS-Portrait-Space-Gray.png");

	const fullSize = {
	width: 1325,
	height: 2616
	};

	import * as React from 'react'
	import { Frame, PropertyControls, ControlType } from 'framer'

	interface Props {
	color: string
	}

	export class componentName extends React.Component<Props> {
	static defaultProps = {
	width: 1600,

	tell application "Safari"

	set tab_list to every tab in the front window

	repeat with the_tab in tab_list
	set the_url to the URL of the_tab
	tell application "Google Chrome" to open location the_url
	end repeat

	end tell

	# Layer::createChildrenRefs
	# Creates convenience refs on targetd layers from the design tab so that we don't have to use Layer::childrenWithName.
	# Pass recursive=true to do this for all descendant layers while maintaining hierarchy.
	Layer::createChildrenRefs = (recursive=false, camelCase=true, ignoreLayers=true) ->

	for layer in @children
	# Filter any layer with a name starting with '_' as 'private layers'.
	unless ignoreLayers is false
	if _.startsWith(layer.name, '_')
	return true