Units and variables

AF supports all units and variables that GSAP supports. You can also use CSS variables and JS variables/interpolation.

Units

GSAP is smart enough to guess units from the properties you want to change, but you can also use pretty much any of CSS units that browsers support:

Absolute units:
px (pixels), pt (points), in (inches) and so on

Relative units:
% (percentage), vh/vw/dvh/dvw (viewport), em/rem (relative font size), etc.

Angle units:
deg (degrees), rad (radians) etc.

Fraction units:
fr (fraction)

CSS variables (passing)

Along with raw values, you can use CSS variables:

<div af-options="height: var(--some-variable)"></div>

Please note though, that (at the moment) values of CSS variables are calculated when animation is set up, and are not recalculated after that.

CSS variables (animating)

GSAP supports CSS variable animation, and so does AF:

<div af-to="--myColor: red"></div>

JS variables and functions

You can also use JS variables available in global context (window, document). You’ll soon be able to pass your own context too — at the moment, context includes window, document and element itself.

<div af-to="x: ${variable}" af-options="duration: ${Math.floor(Math.random() * (5 - 2 + 1)) + 2}"></div>

Quoting values

Parser is intelligent enough, so in most cases, you don’t need to quote the values. This includes primitive values like numbers and strings, and more complex like different units or animation positions. It can even handle more advanced cases, like values with spaces or CSS colors. But in case something doesn’t work — try quoting the value with single quotes :)