Skip to content
AF | Animation Framework

Configuration

Customize some important settings to make AF work the way you want, like breakpoints, animation presets, and more.

Configuration options

When you do AF.init(), you can pass some settings to configure AF. When you specify your own settings, they get deep merged with the defaults, giving your settings priority. At the moment, here’s how the configuration object looks like:

AF.init({
  prefix: 'af-',
  breakpoints: {
    sm: '(max-width: 640px)',
    md: '(min-width: 641px) and (max-width: 768px)',
    lg: '(min-width: 769px) and (max-width: 1024px)',
    xl: '(min-width: 1025px) and (max-width: 1280px)',
    xxl: '(min-width: 1281px)',
  },
  presets: {},
  actions: {},
  engine: 'gsap',
  debug: true,
})

prefix

Prefix is a string that will be added to all animation attributes. By default, it’s af-, so attributes will be like af-from, af-to, etc. But if you want to change it for some reason, you can do so with this option.

breakpoints

Specifies list of breakpoints (in the form of CSS media queries) so you can create different animations for different viewports (or alter some of animation settings per viewport). Default breakpoints provided above are inspired by TailwindCSS breakpoints, but you can fully replace them with your own. Few important considerations:

  • You need to add breakpoints to fully cover all viewports.
  • When you specify breakpoints, they are not merged, but instead replace the defaults.
Responsive animations

presets

Specify presets that will later be used with af-preset attribute or auto-assigned with classes. Example preset might look like:

coolFadeIn: {
  'af-from': 'autoAlpha: 0',
  'af-to': 'autoAlpha: 1',
  'af-options': 'duration: 0.5, ease: power.in',
}

You can then use it by specifying af-preset="coolFadeIn" attribute or by adding af-cool-fade-in class to your element. Presets can include animation options, responsive animations and… well, there’s a whole docs section dedicated to them:

Using presets

actions

Specify actions to later use with af-action attribute. Actions are JS functions that can be triggered when an event (or events) specified with af-on gets fired. AF has a few built-in actions, like play, reverse or toggle to control timelines, but you can add your own. Read more about actions in the dedicated docs section:

Using actions

engine

Specify which animation engine to use. At the moment, only GSAP is supported, but more (at least Anime.js) will be added in the future. gsap is the default atm, so no need to override it.

debug

Enable debug mode. When enabled, AF will log some info about any issues that might occur. Enabled by default.