Plugins

Reanimate On Scroll


Simple and easy to use plugin which allows reanimation on each time the element is scrolled past (up or down)

What Problem Does It Solve

It means you don’t have to formulate any fancy way to reanimate animations each time a user scrolls the page. Animate.it is super useful but it’s ability to reanimate on scroll is fairly limited (espeically in WP) and pretty lackluster, the other animation triggers work really well, such as Click and Hover.

Alterntivley, you can call any other type of animation scrips that use this style of inserting animations into the DOM.

Even better, you can just use the raw JavaScript file in any project that uses the dom

Pre-Requiesites

Animate It! for WordPress
jQuery

How It Works

This script continuously monitors the top of the screen and the view port height (bottom of the screen). When an element is about to leave the screen, the animationName in disappear-<animationName> get’s applied to the tag, invoking the animation. When the element returns back into the screen, the animationName get’s removed, invoking the original animation applied in the class attribute.

How To Use It

WordPress Usage

Page -> Settings -> Block -> Advanced -> additonal CSS Class(es)

scroller disappear-fadeOut animated fadeIn duration1 delay1

HTML Usage

<div class="scroller disappear-fadeOut animated fadeIn duration1 delay1" />

Basically, use your animation as normal, just apply the additional class names into the class and it will work fine.

There are no reviews for this plugin.

“Reanimate On Scroll” is open source software. The following people have contributed to this plugin.



Source link

All the Admin Templates You Could Ask For.

2M+ items from the worlds largest marketplace for Admin Templates, Themes & Design Assets. Whether that's what you need, or you're just after a few Stock Photos - all of it can be found here at Envato Market.

Related Articles

Back to top button