Skip to content
AF | Animation Framework

Features cheatsheet

Here you can find a quick overview of all AF’s HTML attributes and their usage. Make sure to explore the rest of the docs to get more info about each of them.

Basic syntax 

<div af-timeline="myanimation" af-from="x: 100" af-to="x: 0" af-target="& > div" af-options="duration: 1" af-options-md="delay: 0.5" af-scroll="">
  <div class="circle"></div>
  <div class="triangle"></div>
</div>

af-timeline

name, position, {option: value}

Sequences animations with the same name (required) into one timeline. Position (optional) is where on the timeline to start the animation (all types of GSAP’s position parameters are supported). Properties (optional) as object, are timeline settings like repeat, duration, etc.
Timelines

af-target

selector

CSS selector to specify element(s) to animate. If not provided, defaults to the element itself. Inside, you can use & symbol to refer to the element itself, and valid CSS selectors, like & > div or .box or & ul li.
Animation targets

af-from, af-to

option: value, option: value

Animates from specified values to current state on the page (when only af-from is provided); from current state on the page to specified values (when af-to is provided); or from and to specified values (when both af-from and af-to are provided). Properties can be any animatable properties using any units and variables.
From-to animation

af-keyframes

param: [value, value, value], param: [value, value, value], option: value

Array-based keyframes, first any number of parameters as arrays, next (optional) extra settings like easing.

0%: { option: value }, 50%: { option: value }, 100%: { option: value }

Percentage-based keyframes, keys are percentages, values inside are objects with properties to animate (one or many).

{ param: value, param: value }, { param: value }, ...

List of comma-separated objects, each object is a keyframe with any number of properties to animate.
Keyframes animation

af-options

option: value, option: value

Animation options, like duration, delay, stagger, easing, etc. Usually added as properties of the whole animation. Check out GSAP docs about special properties.
Animation options

af-on

event, event, ...

One or more events (comma-separated) that will trigger action specified with af-action attribute.
Actions and events

af-action

action, target, arguments

Action name (required), target timeline (required) and arguments (optional, can be an object) to pass to the action. Triggers one of the built-in actions on the specified timeline or custom action (you can set target timeline to null).
Actions and events

af-splittext

chars,words,lines, param: value, ...

Shorthand allows to create split text animation by chars/words/lines (you can specify one or more of them, comma-separated). Or specify any number of parameters that splitText supports. Use in conjunction with af-target to specify element to split and af-options to specify split options.
Split text effects

af-preset

preset name

Applies specified preset to the element. Doesn’t support responsive (e.g. you can’t do af-preset-md), but you can specify them in the preset itself. You can also override any settings in the preset by adding extra af-attributes to the element.
Animation presets