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' // requiredimport ScrollTrigger from 'gsap/ScrollTrigger' // if neededimport 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.