Follow for free plugins, new theme releases and theme news
Plugin Description
Animate any Elements on scroll using the popular AOS JS library simply by adding class names.
This plugin helps you integrate easily with AOS JS library to add any AOS animations (on scroll animation) to WordPress.
It should work well with the native gutenberg blocks or any page builder that provides an input field for adding custom class names to elements.
Check out the AOS demo and documentation.
How to add Animations?
Simply add the desired AOS animation to your element class name with “aos-” prefix and the plugin will add the corresponding aos attribute to the element tag.
Fade animations:
- fade: aos-fade
- fade-up: aos-fade-up
- fade-down: aos-fade-down
- fade-left: aos-fade-left
- fade-right: aos-fade-right
- fade-up-right: aos-fade-up-right
- fade-up-left: aos-fade-up-left
- fade-down-right: aos-fade-down-right
- fade-down-left: : aos-fade-down-left
Flip animations:
- flip-up: aos-flip-up
- flip-down: aos-flip-down
- flip-left: aos-flip-left
- flip-right: aos-flip-right
Slide animations:
- slide-up: aos-slide-up
- slide-down: aos-slide-down
- slide-left: aos-slide-left
- slide-right: aos-slide-right
Zoom animations:
- zoom-in: aos-zoom-in
- zoom-in-up: aos-zoom-in-up
- zoom-in-down: aos-zoom-in-down
- zoom-in-left: aos-zoom-in-left
- zoom-in-right: aos-zoom-in-right
- zoom-out: aos-zoom-out
- zoom-out-up: aos-zoom-out-up
- zoom-out-down: aos-zoom-out-down
- zoom-out-left: aos-zoom-out-left
- zoom-out-right: aos-zoom-out-right
Animation Settings
By default, the global animation settings are
- offset: -100
- duration: 1100
- easing: ease
- delay: 0
- once: true
you can change that using filter:
add_filter( 'aos_init', function($aos_init) {
return '
var aoswp_params = {
"offset":"200",
"duration":"1800",
"easing":"ease-in-out",
"delay":"0",
"once": false};
';
} );
or add the extra classes below to the element for individual settings. The plugin will add the corresponding aos attribute to the tag.
Once behavior:
- once=true: aos-once-true
- once=false: aos-once-false
Easing functions:
- linear: aos-easing-linear
- ease: aos-easing-ease
- ease-in: aos-easing-ease-in
- ease-out: aos-easing-ease-out
- ease-in-out: aos-easing-ease-in-out
- ease-in-back: aos-easing-ease-in-back
- ease-out-back: aos-easing-ease-out-back
- ease-in-out-back: aos-easing-ease-in-out-back
- ease-in-sine: aos-easing-ease-in-sine
- ease-out-sine: aos-easing-ease-out-sine
- ease-in-out-sine: aos-easing-ease-in-out-sine
- ease-in-quad: aos-easing-ease-in-quad
- ease-out-quad: aos-easing-ease-out-quad
- ease-in-out-quad: aos-easing-ease-in-out-quad
- ease-in-cubic: aos-easing-ease-in-cubic
- ease-out-cubic: aos-easing-ease-out-cubic
- ease-in-out-cubic: aos-easing-ease-in-out-cubic
- ease-in-quart: aos-easing-ease-in-quart
- ease-out-quart: aos-easing-ease-out-quart
- ease-in-out-quart: aos-easing-ease-in-out-quart
Animation Duration:
- 100ms: aos-duration-100
- 200ms: aos-duration-200
- 300ms: aos-duration-300
- 400ms: aos-duration-400
- 500ms: aos-duration-500
- 600ms: aos-duration-600
- 700ms: aos-duration-700
- 800ms: aos-duration-800
- 900ms: aos-duration-900
- 1000ms: aos-duration-1000
- 1100ms: aos-duration-1100
- 1200ms: aos-duration-1200
- 1300ms: aos-duration-1300
- 1400ms: aos-duration-1400
- 1500ms: aos-duration-1500
- 1600ms: aos-duration-1600
- 1700ms: aos-duration-1700
- 1800ms: aos-duration-1800
- 1900ms: aos-duration-1900
- 2000ms: aos-duration-2000
- 2100ms: aos-duration-2100
- 2200ms: aos-duration-2200
- 2300ms: aos-duration-2300
- 2400ms: aos-duration-2400
- 2500ms: aos-duration-2500
- 2600ms: aos-duration-2600
- 2700ms: aos-duration-2700
- 2800ms: aos-duration-2800
- 2900ms: aos-duration-2900
- 3000ms: aos-duration-3000
Note
-
AOS CSS & JS will only be loaded if there is ‘aos-‘ in the page’s html. So, CSS & JS will not be loaded on pages that do not have the ‘aos-‘ class name in the elements.
-
Although the AOS library is already lightweight, the CSS and JS (that I modified for this plugin) are delayable, so it won’t hurt your site’s performance at all.
Disclaimer
This plugin doesn’t add anything to your database and won’t do any permanent change to your HTML, so you can safely deactivate and delete it when you no longer need it.
USEFUL PLUGINS TO OPTIMIZE YOUR SITE’S SPEED:
-
Optimize More! – Selectively Optimize your CSS/JS Delivery: Load CSS Asynchronously, Delay CSS and JavaScripts until User Interaction, Preload Critical CSS and JavaScripts, and Remove Unused CSS and JavaScripts Files.
-
Optimize More! Images – A simple yet powerfull image, iframe, and video optimization plugin (Lazy load images / iframes / videos, Preload featured images automatically). Also support lazy loading CSS background images.
Other USEFUL PLUGIN:
- Shop Extra – A lightweight plugin to optimize your WooCommerce & Business site: Floating WhatsApp Chat Widget (can be use without WooCommerce), WhatsApp Order Button for WooCommrece, Hide/Disable WooCommerce Elements, WooCommerce Strings Translations, and many more.
Screenshots
No screenshots provided
