Installation

AF is shipped as a few simple drop-in JS files that you can include in your project either locally, via CDN, or using NPM package.

Add with a script tag

That’s the simplest way to use AF — just add a few script tags to your page and you’re good to go.

Add GSAP scripts to your page. If you only use basic features, GSAP core is enough. If you use ScrollTrigger, ScroolSmoother, etc — make sure to include them too. No need to do registerPlugin() — AF will handle that for you.

<!-- GSAP core -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

<!-- Optional: ScrollTrigger, ScrollSmoother, etc -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollSmoother.min.js"></script>

Right after that, add a script tag that links to af-gsap.umd.js files.
```
<script src="https://cdn.jsdelivr.net/npm/@vleytman/af@1.0/dist/af-gsap.umd.js"></script>
```
This will automatically include latest version of AF and AF GSAP support.
Add a script tag to initialize AF on your page. You can also provide some settings — check out the Configuration page to find out more about them.
```
<script>
  document.addEventListener('DOMContentLoaded', () => {
    AF.init()
 })
</script>
```

Install with NPM

If you prefer to use a bundler, you can install ESM version of AF with NPM.

Install latest version of AF and GSAP with NPM.
Terminal window
```
npm install @vleytman/af gsap
```

Import GSAP core and all GSAP plugins you’re planning to use. No need to do registerPlugin() — AF will handle that for you.

import gsap from 'gsap' // required
import ScrollTrigger from 'gsap/ScrollTrigger' // if needed
import SplitText from 'gsap/SplitText' // if needed

Import AF core and AF GSAP support, and add AF.init(). Register AF GSAP engine and provide gsap and all plugins you’re planning to use.
```
import AF from '@vleytman/af'

AF.init({plugins: {gsap, ScrollTrigger, SplitText}})
```
You can also provide some settings, like presets and defaults to AF.init() — check out the Configuration page to find out more about them.