Skip to content
AF | Animation Framework

Intro to AF

AF is a small, drop-in JS library that uses GSAP under the hood, and allows you to animate HTML elements using CSS attributes with simple syntax, allowing you to use most of the power of GSAP in a straightforward way.

AF — animation easy af!

GSAP is the one of most popular JS animation libraries with rich functionality, but it comes at a price: sprinkling some small animations here and there needs writing lots of JS code. That becomes even more cumbersome when you’ve got a page builder or CMS like Webflow, where updating JS is not always an easy task. As a developer and a designer myself, I was searching for a tool that would allow me to add simple (or at least, not-so-complex) animations easily — and surprisingly, I’ve found only a few. Some like Glaze have weird syntax I couldn’t get used to, some like most of the CSS-only ones are too simplistic. So, I went ahead and created my own.

The idea is super simple — when you want to animate an element, you just add some easy to read HTML attributes to it (which is supported in almost any environment) — and the library handles the rest. It can be as simple as…

<div class="box" af-from="backgroundColor: #000, autoAlpha: 0"></div>

… which will animate the element from specific values — e.g. fully transparent and black — to its current state on the page. Quite simple, right? But it can get more sophisticated too —

<div class="box" af-to="scale: 1.5, rotation: 180deg" af-options="duration: 0.5, ease: power2.inOut"></div>

Now it’s gonna transition in 0.5 seconds to a scale of 1.5 and rotate 180 degrees with some nice custom easing.

Main features

  • Simple, JS/CSS-like syntax that’s readable and mimics GSAP’s own attribute names
  • From/to animations that support most of GSAP’s animation options
  • Keyframe animations (simple, object-based, array-based)
  • Multi-step animations with timelines
  • Responsive everything — apply different animations to different viewports
  • Specify animation targets and events that trigger animations
  • Use scroll-triggered animations and split text animations
  • Combine all those options (why not a staggered, scroll-triggered timeline animation?)
  • Save settings as reusable presets and override them when needed
  • Set up scroll smoothing for your page

Library is also modular, so later on I’ll both add new features, and support for libraries other than GSAP (Anime.js?)

Simplicity vs. complexity

Main goal is not to replace GSAP, but complement it and make creating small to medium complexity animations as easy as possible. You can do some quite advanced things too, but the functionality is intentionally limited so that it doesn’t become too crowded. For complex, multi-step animations heavily connected to your page and using lots of features like draggables, you stil better use GSAP directly. I’ll be adding more features in the future, but they’ll always be weighed against simplicity.