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 
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.
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
Speed
Animation speed, milliseconds.
Easing
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
Delay
Animation delay, milliseconds.
Scroll
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.
Offset
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.
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
DOWNLOAD fAnimations - Pure JS Onscroll Animations Download
No comments:
Post a Comment