Animation presets

Animation presets allow you to apply predefined animations to elements. You can specify presets using af-preset attribute, or use af-preset-presetname class, and they’ll be applied to the element when you animate it.

Create presets

Presets are defined inside AF.presets object, and you can add as many as you want. To keep things simple, and don’t come up with crowded multi-level JSON objects, presets are made of properties similar to attributes you add in HTML and use 100% identical syntax. For example:

AF.init({
  presets: {
    fadeIn: {
      'af-from': 'autoAlpha: 0',
      'af-to': 'autoAlpha: 1',
      'af-options': 'duration: 0.5, ease: power.in',
    }
  }
})

You can use any attributes you would normally use in HTML, including responsive suffixes, so if you wanted to alter duration in the example above for md and below viewports, you could do it like this:

AF.init({
  presets: {
    fadeIn: {
      'af-from': 'autoAlpha: 0',
      'af-to': 'autoAlpha: 1',
      'af-options': 'duration: 0.5, ease: power.in',
      'af-options-md': 'duration: 1, ease: power.inOut',
    }
  }
})

Apply presets

Use af-preset attribute

You can apply presets to elements using af-preset attribute. You can also use af-preset together with other attributes — in this case, matching attributes you specify on the element itself will have precedence over preset attributes, e.g. this code

<div af-preset="fadeIn" af-from="y: 30" af-to="y: 0" af-options="duration: 2"></div>

will use fadeIn preset, and also animate y property from 30 to 0. Because duration is defined both in the preset and on the element level, it will be 2 — because that’s what’s defined on the element level.

Use af-preset-name class

AF will automatically add presets to elements that have af-preset-name class. preset-name is the name of the preset in kebab-case, so if you have presets named fadeIn and downscale, you can add it to an element like this:

<div class="af-fade-in"></div>
<div class="af-downscale"></div>