Animatable properties

You can animate pretty much any CSS property — same as with native GSAP.

GSAP CSS

Check out GSAP’s own page about CSS to learn more about GSAP approach to animating CSS properties:
GSAP CSS

Natively, GSAP can animate pretty much any CSS property, even some of those that CSS doesn’t allow to animate. I highly recommend checking out GSAP CSS page to get more information, but as a quick list, you can find most popular ones below.

Properties should be provided in camel case — e.g. if you have background-color in CSS, to animate it with GSAP / AF it becomes backgroundColor; font-size is fontSize, and so on.

GSAP also has transform shorthand properties, that are more performant than CSS native properties — so it’s recommended to use them instead of say translateX or scaleY or alike.

Transforms

Check out this MDN page describing browser transforms. All properties here are GSAP shorthands that are recommended to use, most are equivalent to CSS transform:translate.

Property	Example	Description
x	x: 100	Horizontal translation (move along X-axis)
y	y: 100	Vertical translation (move along Y-axis)
z	z: 100	Depth translation (move along Z-axis, 3D)
xPercent	xPercent: 50	Horizontal translation in %
yPercent	yPercent: 50	Vertical translation in %
scale	scale: 2	Uniform scaling (resizes element proportionally)
scaleX	scaleX: 3	Horizontal scaling (resizes element along X-axis)
scaleY	scaleY: 3	Vertical scaling (resizes element along Y-axis)
rotation	rotation: 90deg	Rotation around the Z-axis
rotationX	rotationX: 90	3D rotation around the X-axis
rotationY	rotationY: 90deg	3D rotation around the Y-axis
skewX	skewX: 30deg	Skew the element horizontally
skewY	skewY: 30deg	Skew the element vertically
transformPerspective	transformPerspective: 200	3D perspective transformation
transformOriginx	transformOrigin: center 50%	Defines the origin point for transformations

Opacity and color

Check out respective pages on MDN about all those properties to get better idea about units and usage.

Property	Example	Description
opacity	opacity: 0.5	Adjusts element transparency
autoAlpha	autoAlpha: 0	GSAP shorthand for opacity and visibility
backgroundColor	backgroundColor: #223344	Animates background color
borderColor	color: #FFFFFF	Animates text color
color	backgroundColor: red	Background color of the element
borderRadius	borderRadius: 3	Rounds the corners of the element

Layout and size

Check out respective pages on MDN about all those properties to get better idea about units and usage.

Property	Example	Description
width	width: 100px	Sets width of the element
height	height: 25vh	Sets height of the element
minWidth	minWidth: 50%	Sets minimum width of the element
maxWidth	maxWidth: 300px	Sets maximum width of the element
minHeight	minHeight: 150	Sets minimum height of the element
maxHeight	maxHeight: 50dvh	Sets maximum height of the element
margin	margin: 10px	Sets margins of the element
padding	padding: 1rem 0.5rem	Sets padding of the element
top	top: 0	Sets top position of the element
bottom	bottom: 30px	Sets bottom position of the element
left	left: 10	Sets left position of the element
right	right: 30	Sets right position of the element

Extra CSS props

Check out respective pages on MDN about all those properties to get better idea about units and usage.

Property	Example	Description
clipPath	clip-path: circle(40%)	Defines the visible area of an element
filter	filter: blur(5px)	Applies visual effects like blur, brightness, etc.
boxShadow	box-shadow: 10px 5px 5px red	Adds shadow around the element
textShadow	text-shadow: 1px 1px 2px #345678	Adds shadow to text