Properties

View as Markdown

SleekMotion is based on GSAP. 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 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.