fAnimations - Pure JS Onscroll Animations

fAnimations - Pure JS Onscroll Animations

fAnimations is the simple pure js plugin for easy creating onscroll animations on your website.

I created it for use in my own projects, because the existing solutions wasn’t suitable for a various reasons, such as extra dependencies, the need to include additional stylesheets, incorrect work with positioning, superfluous functionality and so on.

The result is the lightweight, easy-to-use plugin for applying onscroll animations just by adding a several data-attributes. The plugin is great for use on any website, includes the most demanded animations and allows to create custom effects with just one line of code.

I would be glad if it will be useful for someone else  :)


                                          Demo link.

Icon. For developers

If you would like to use fAnimations in your theme/template, I will be glad to include a link to your project on this page. Just let me know via the e-mail that you have purchased an extended license and used the plugin in your work.

Icon. Included options

Animation name

Built-in animations:

  • fade-in
  • scale-up
  • scale-down
  • scale-up-top
  • scale-up-bottom
  • scale-down-top
  • scale-down-bottom
  • rotate
  • rotate-x
  • rotate-y
  • slide-up
  • slide-down
  • slide-left
  • slide-right
  • fly-in
  • simple-fly


Animation speed, milliseconds.


Animation easing. Any valid CSS-transition value or one of the standart easing functions:

  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInBack
  • easeOutBack
  • easeInOutBack


Animation delay, milliseconds.


Animation start trigger point relative to the viewport, % (from 0 to 100). 0 means the animation will start when the element hits the top of the viewport. 100 means the animation will start when the element enters the viewport.


The main animated property value before being animated. E.g., for the “slide-up” animation data-offset=”30” means the element’s position by Y-axis will be animated from 30px to 0px.

Icon. Changelog

v3.3.0 – February 23, 2019

- IMPROVEMENT: Removing of the hardcoded post-animation styles.
- IMPROVEMENT: Fix of logical error in the names of animations: "slide left" and "slide right" are swapped.

v3.2.0 – November 30, 2018

- Release