Animation » All animatable properties

All animatable properties

All numerical properties of a layer can be animated, plus a few more things like colors, gradients, and shadows. Here’s the complete list:

Dimensionswidth, height, size, scale, scaleX, scaleY, scaleZ
Positionx, y, z and also minX, midX, maxX, minY, midY, maxY
ColorbackgroundColor, borderColor, shadowColor, color
Gradientgradient (to a gradient object, or to start, end, angle properties individually)
BorderborderColor, borderRadius (and also topLeft, topRight, bottomLeft, bottomRight independently), borderWidth (also top, right, bottom, left independently)
Rotationrotation (or rotationZ), rotationX, rotationY
Skewskew, skewX, skewY
Transform originoriginX, originY, originZ
Filtersblur, backgroundBlur, brightness, contrast, saturate, grayscale, hueRotate, invert, sepia
ShadowshadowX, shadowY, shadowBlur, shadowSpread, shadowColor, shadow1—shadow9 (to a shadow object, or to color, x, y, blur, spread properties individually), shadows (to another array of shadow objects)
Opacityopacity
3D Perspectiveperspective, perspectiveOriginX, perspectiveOriginY
Scroll DistancescrollX, scrollY
Text Layerpadding, color, backgroundColor, fontSize, lineHeight, shadowColor, shadowX, shadowY, shadowBlur, letterSpacing, wordSpacing, textIndent, template (template tags will animate to a number value)

The smoothest animations

Pro tip: If your prototype doesn’t animate smoothly, know that these properties will almost always animate without stuttering:

  • scale (scaleX, scaleY)
  • x and y positions (probably also minX, midX, etc.)
  • opacity

They perform best because they are hardware accelerated, they run on the GPU (the graphics card). Most other properties will cause ‘repaints’ (redrawing of the pixels of the layer on the CPU).

So sometimes it can make sense to animate scale instead of width and height, or to animate with opacity instead of between colors.