Quick primer

Check out some ready-made examples to get a feel of how AF works. It’s just recently released, so I’m still figuring out best ways to do different things — so if you have any suggestions, feel free to open an issue or contact me directly. I also promise to add better examples ;)

Examples

For responsive animations, you can click HTML tab to hide the code, so viewport will become wider.

Keyframes, stagger, targets, simple af-to

Staggered animation for circles with af-keyframes, af-to for the line.

Staggered animation with targets

You can set targets for animations with af-target and set stagger in af-options.

Parallax

Multiple scroll triggers with different scrub values for smooth parallax effect.

SplitText

Split text animation by letters with scroll trigger.