Stonehenge Creations

<blockquote>
Requires <a href="https://wordpress.org/plugins/events-manager/" rel="ugc">Events Manager</a> (free plugin) to be installed & activated.
</blockquote>
This add-on lets you create a slider (carousel or fade) for your upcoming Events Manager events and/or locations. It work just like as EM’s native [events_list], but will show the content in a slider instead of a list. You can use the exact same parameters as you are already used to in Events Manager. 
 [events_slider scope=”future” category=”3″]
It supports all native Events Manager features: 
If it works in EM, it should work in this slider as well. 🙂
<ul>
<li>Supports all native <a href="https://wp-events-plugin.com/documentation/event-search-attributes/" rel="nofollow ugc">Events Manager search arguments</a></li>
<li>Supports Event Placeholders and Location Placeholders</li>
<li>Supports full HTML formatting</li>
<li>MultiSite compatible: [events_slider blog=”all”]</li>
</ul>
<blockquote>
The plugin core is based on <a href="https://bxslider.com/" rel="nofollow ugc">bxSlider</a>.
</blockquote>
Support is technical. 
I make it work, you make it pretty.
<h3>Localization</h3>
<ul>
<li>US English (default)</li>
<li>Dutch (included in the download)</li>
</ul>
The plugin is ready to be translated, all texts are defined in the POT file. Any contributions to localize this plugin are very welcome!
<h3>Feedback</h3>
I am open to your suggestions and feedback! 
<a href="https://www.stonehengecreations.nl/" rel="nofollow ugc">Please also check out my other plugins</a>.

Events Manager – Events / Locations Slider

Create a dynamic Slider (carousel or fade) for Events and Locations with the default Events Manager arguments, using a simple shortcode.

Arya Dhiratara

Think Digital Agency

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 core blocks or any page builder (tested with GenerateBlocks and Elementor) that provides an input field for adding custom class names to elements.
<h3>About AOS</h3>
AOS is a small JavaScript library built by <a href="https://twitter.com/michalsnik" rel="nofollow ugc">Michał Sajnóg</a> that allows you to add animated effects to HTML elements when they come into view as the user scrolls down a webpage. AOS provides a set of predefined animations using CSS that can be easily applied to elements using simple data attributes in the HTML code.
Check out the AOS <a href="https://michalsnik.github.io/aos/" rel="nofollow ugc">demo</a> and <a href="https://github.com/michalsnik/aos" rel="nofollow ugc">documentation</a>.
<h3>How to add Animations?</h3>
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:
<ul>
<li>fade: aos-fade</li>
<li>fade-up: aos-fade-up</li>
<li>fade-down: aos-fade-down</li>
<li>fade-left: aos-fade-left</li>
<li>fade-right: aos-fade-right</li>
<li>fade-up-right: aos-fade-up-right</li>
<li>fade-up-left: aos-fade-up-left</li>
<li>fade-down-right: aos-fade-down-right</li>
<li>fade-down-left: : aos-fade-down-left</li>
</ul>
Flip animations:
<ul>
<li>flip-up: aos-flip-up</li>
<li>flip-down: aos-flip-down</li>
<li>flip-left: aos-flip-left</li>
<li>flip-right: aos-flip-right</li>
</ul>
Slide animations:
<ul>
<li>slide-up: aos-slide-up</li>
<li>slide-down: aos-slide-down</li>
<li>slide-left: aos-slide-left</li>
<li>slide-right: aos-slide-right</li>
</ul>
Zoom animations:
<ul>
<li>zoom-in: aos-zoom-in</li>
<li>zoom-in-up: aos-zoom-in-up</li>
<li>zoom-in-down: aos-zoom-in-down</li>
<li>zoom-in-left: aos-zoom-in-left</li>
<li>zoom-in-right: aos-zoom-in-right</li>
<li>zoom-out: aos-zoom-out</li>
<li>zoom-out-up: aos-zoom-out-up</li>
<li>zoom-out-down: aos-zoom-out-down</li>
<li>zoom-out-left: aos-zoom-out-left</li>
<li>zoom-out-right: aos-zoom-out-right</li>
</ul>
<h3>Animation Settings</h3>
By default, the global animation settings are
<ul>
<li>offset: -100</li>
<li>duration: 1100</li>
<li>easing: ease</li>
<li>delay: 0</li>
<li>once: true</li>
</ul>
you can change that using filter:
<pre><code>add_filter( 'aos_init', function($aos_init) {
 return '
 var aoswp_params = {
 "offset":"200",
 "duration":"1800",
 "easing":"ease-in-out",
 "delay":"0",
 "once": false};
 ';
} );
</code></pre>
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:
<ul>
<li>once=true: aos-once-true</li>
<li>once=false: aos-once-false</li>
</ul>
Easing functions:
<ul>
<li>linear: aos-easing-linear</li>
<li>ease: aos-easing-ease</li>
<li>ease-in: aos-easing-ease-in</li>
<li>ease-out: aos-easing-ease-out</li>
<li>ease-in-out: aos-easing-ease-in-out</li>
<li>ease-in-back: aos-easing-ease-in-back</li>
<li>ease-out-back: aos-easing-ease-out-back</li>
<li>ease-in-out-back: aos-easing-ease-in-out-back</li>
<li>ease-in-sine: aos-easing-ease-in-sine</li>
<li>ease-out-sine: aos-easing-ease-out-sine</li>
<li>ease-in-out-sine: aos-easing-ease-in-out-sine</li>
<li>ease-in-quad: aos-easing-ease-in-quad</li>
<li>ease-out-quad: aos-easing-ease-out-quad</li>
<li>ease-in-out-quad: aos-easing-ease-in-out-quad</li>
<li>ease-in-cubic: aos-easing-ease-in-cubic</li>
<li>ease-out-cubic: aos-easing-ease-out-cubic</li>
<li>ease-in-out-cubic: aos-easing-ease-in-out-cubic</li>
<li>ease-in-quart: aos-easing-ease-in-quart</li>
<li>ease-out-quart: aos-easing-ease-out-quart</li>
<li>ease-in-out-quart: aos-easing-ease-in-out-quart</li>
</ul>
Animation Duration:
<ul>
<li>100ms: aos-duration-100</li>
<li>200ms: aos-duration-200</li>
<li>300ms: aos-duration-300</li>
<li>400ms: aos-duration-400</li>
<li>500ms: aos-duration-500</li>
<li>600ms: aos-duration-600</li>
<li>700ms: aos-duration-700</li>
<li>800ms: aos-duration-800</li>
<li>900ms: aos-duration-900</li>
<li>1000ms: aos-duration-1000</li>
<li>1100ms: aos-duration-1100</li>
<li>1200ms: aos-duration-1200</li>
<li>1300ms: aos-duration-1300</li>
<li>1400ms: aos-duration-1400</li>
<li>1500ms: aos-duration-1500</li>
<li>1600ms: aos-duration-1600</li>
<li>1700ms: aos-duration-1700</li>
<li>1800ms: aos-duration-1800</li>
<li>1900ms: aos-duration-1900</li>
<li>2000ms: aos-duration-2000</li>
<li>2100ms: aos-duration-2100</li>
<li>2200ms: aos-duration-2200</li>
<li>2300ms: aos-duration-2300</li>
<li>2400ms: aos-duration-2400</li>
<li>2500ms: aos-duration-2500</li>
<li>2600ms: aos-duration-2600</li>
<li>2700ms: aos-duration-2700</li>
<li>2800ms: aos-duration-2800</li>
<li>2900ms: aos-duration-2900</li>
<li>3000ms: aos-duration-3000</li>
</ul>
Animation Delay: (*new, added in 1.0.2)
<ul>
<li>100ms: aos-delay-100</li>
<li>200ms: aos-delay-200</li>
<li>300ms: aos-delay-300</li>
<li>400ms: aos-delay-400</li>
<li>500ms: aos-delay-500</li>
<li>600ms: aos-delay-600</li>
<li>700ms: aos-delay-700</li>
<li>800ms: aos-delay-800</li>
<li>900ms: aos-delay-900</li>
<li>1000ms: aos-delay-1000</li>
<li>1100ms: aos-delay-1100</li>
<li>1200ms: aos-delay-1200</li>
<li>1300ms: aos-delay-1300</li>
<li>1400ms: aos-delay-1400</li>
<li>1500ms: aos-delay-1500</li>
<li>1600ms: aos-delay-1600</li>
<li>1700ms: aos-delay-1700</li>
<li>1800ms: aos-delay-1800</li>
<li>1900ms: aos-delay-1900</li>
<li>2000ms: aos-delay-2000</li>
<li>2100ms: aos-delay-2100</li>
<li>2200ms: aos-delay-2200</li>
<li>2300ms: aos-delay-2300</li>
<li>2400ms: aos-delay-2400</li>
<li>2500ms: aos-delay-2500</li>
<li>2600ms: aos-delay-2600</li>
<li>2700ms: aos-delay-2700</li>
<li>2800ms: aos-delay-2800</li>
<li>2900ms: aos-delay-2900</li>
<li>3000ms: aos-delay-3000</li>
</ul>
<h3>To Disable Animations On Specific Device</h3>
<ul>
<li>To disable animations on certain elements on devices larger than 767px, simply add <code>aoswp-disable-desktop</code> class name to the element tag 
 </li>
<li>To disable animations on certain elements on devices smaller than 766px, simply add <code>aoswp-disable-mobile</code> class name to the element tag 
 </li>
<li>
To disable animations site-wide / per page basis on specific devices: 
add this lines to your css files:
@media ( <a href="https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488" rel="nofollow ugc"> <code>your media query</code> </a> ) {
<pre><code> html:not(.no-js) .aoswp-enabled [data-aos] {
 opacity: 1!important;
 -webkit-transform: none!important;
 transform: none!important;
 transition: none!important;
 transition-timing-function: unset!important;
 transition-duration: unset!important;
 transition-property: none!important;
 }
</code></pre>
}
</li>
</ul>
 
<h3>Note</h3>
<ul>
<li>Both AOS JavaScript and CSS will only be loaded if there is ‘<code>aos-</code>‘ in the page’s html. So this plugin will not add bloat to pages that do not use/need the AOS animations. 
 </li>
<li>Although the AOS library is already lightweight, the CSS and JS in this plugin are delay-able, so it won’t hurt your site’s performance at all. (You can use <a href="https://wordpress.org/plugins/optimize-more/" rel="ugc">Optimize More!</a> to delay the CSS and JS)</li>
</ul>
<h3>Disclaimer</h3>
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.
<h3>USEFUL PLUGINS TO OPTIMIZE YOUR SITE’S SPEED:</h3>
<ul>
<li><a href="https://wordpress.org/plugins/optimize-more/" rel="ugc">Optimize More!</a> – A DIY WordPress Page Speed Optimization Pack. Features:
<ul>
<li>Load CSS Asynchronously – selectively load CSS file(s) asynchronously on selected post/page types.</li>
<li>Delay CSS and JS until User Interaction – selectively delay CSS/JS load until user interaction on selected post/page types.</li>
<li>Preload Critical CSS, JS, and Font Files – selectively preload critical CSS/JS/Font file(s) on selected post/page types.</li>
<li>Remove Unused CSS and JS Files – selectively remove unused CSS/JS file(s) on selected post/page types.</li>
<li>Load Gutenberg CSS conditionally – Load each CSS of the core blocks will only get enqueued when the block gets rendered on a page.</li>
<li>Advance Defer JS – hold JavaScripts load until everything else has been loaded. Adapted from the legendary varvy’s defer js method *recommended for defer loading 3rd party scripts like ads, pixels, and trackers</li>
<li>Defer JS – selectively defer loading JavaScript file(s) on selected post/page types.</li>
<li>Remove Passive Listener Warnings – Remove the “Does not use passive listeners to improve scrolling performance” warning on Google PageSpeed Insights 
 </li>
</ul>
</li>
<li><a href="https://wordpress.org/plugins/optimize-more-images/" rel="ugc">Optimize More! Images</a> – 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. 
 </li>
<li><a href="https://wordpress.org/plugins/lazyload-preload-and-more/" rel="ugc">Lazyload, Preload, and more!</a> – A simplified version of Optimize More! Images. Able to do what Optimize More! Images can do but without UI for settings (you can customize the default settings using filters). This tiny little plugin (around 14kb zipped) will automatically:
<ul>
<li>lazyload your below the fold images (img tag and bg images) /iframes / videos,</li>
<li>preload your featured images,</li>
<li>and add loading=”eager” to your featured image and all images that have <code>no-lazy</code> or <code>skip-lazy</code> class.</li>
</ul>
</li>
</ul>
<h3>Other USEFUL PLUGIN:</h3>
<ul>
<li><a href="https://wordpress.org/plugins/shop-extra/" rel="ugc">Shop Extra</a> – A lightweight plugin to optimize your WooCommerce & Business site:
<ul>
<li>Floating WhatsApp Chat Widget (can be use without WooCommerce),</li>
<li>WhatsApp Order Button for WooCommrece,</li>
<li>Hide/Disable WooCommerce Elements,</li>
<li>WooCommerce Strings Translations,</li>
<li>and many more. 
 </li>
</ul>
</li>
<li><a href="https://wordpress.org/plugins/image-video-lightbox/" rel="ugc">Image & Video Lightbox</a> – A lightweight plugin that automatically adds Lightbox functionality to images displayed by WordPress (Gutenberg) Gallery and Image Blocks, as well as GenerateBlocks Image Blocks, and also videos created by the core Video Block, without the need to set the link to media file manually one by one.</li>
</ul>

Animate on Scroll

Animate any Elements on scroll using the popular AOS JS library simply by adding class names.

Events Manager – Events / Locations Slider vs Animate on Scroll