# Properties

SleekMotion is based on [GSAP](https://gsap.com/). It bundles GSAP 3.13's core
and the ScrollTrigger plugin, so it animates the properties GSAP's core
supports and takes the same options, such as `duration`, `ease`, `delay`,
`stagger`, `repeat` and `yoyo`. No other GSAP plugin is included, so
properties that need one, such as `motionPath`, `drawSVG` or `text`, have no
effect. Below are the properties you will use most.

An animation takes CSS properties, GSAP's transform shorthands and animation
options, the options of `scrollTrigger`, `stagger` and `snap`, and attributes
through `attr`, such as `attr.cx`, other than links, sources and event
handlers. Any other key, such as an element property or a callback, is
ignored.

## CSS

GSAP animates CSS properties by their `camelCase` names. To animate
`background-color`, write `backgroundColor`:

```html
<div class="animate-to:backgroundColor-red"></div>
```

GSAP's transform shorthands, such as `x`, `y`, `xPercent`, `yPercent`,
`rotate`, `scale`, `scaleX` and `scaleY`, work the same way, and `autoAlpha`
fades an element and hides it once it reaches zero.

## Duration

`duration` sets the length of an animation in seconds:

```html
<div class="animate-to:backgroundColor-red|duration-5"></div>
```

## Ease

`ease` takes the name of a GSAP ease:

```html
<div class="animate-to:backgroundColor-red|ease-power3.inOut"></div>
```

The [GSAP documentation](https://gsap.com/docs/v3/Eases) lists every ease.

Options like `duration` and `ease` belong inside the animation object, joined
to the other properties with a pipe (`|`). A separate class such as
`animate-duration:5` is not part of any animation and is ignored. To give
every animation the same options, use the
[timeline defaults](/docs/motion/usage/defaults.md).