A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

Overview

jQuery AniView

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4.x of animate.css

Demo

http://jjcosgrove.github.io/jquery-aniview/

Installation (via npm)

npm install jquery-aniview

CDN

Instead of a local installation you may request a remote copy of jQuery AniView from unpkg CDN.

To request the latest version, use the following:

<script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js"></script>

For maximum security you may also decide to:

Example:

<script src="https://unpkg.com/[email protected]/dist/jquery.aniview.js" integrity="sha384-uvboBeyPkVGldyoicVJST1JEAbxI2W0lG2fFOyGvahZrC4jWiv0vmryxw9NXIEn6" crossorigin="anonymous"></script>

Initialisation

$('.aniview').AniView();

Options

var options = {
    animateClass: 'animated',
    animateThreshold: 100,
    scrollPollInterval: 50
}
$('.aniview').AniView(options);
Option Type Description Default
animateClass string the animate.css class to use: 'animated' enables v3.x support and 'animate__animated' to enable v4.x support animated
animateThreshold int +ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view. 0
scrollPollInterval int The frequency at which user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension to jQuery's in-built 'scroll' event/handler. 20

Markup v3

<div class="aniview" data-av-animation="slideInRight"></div>

Markup v4

<div class="aniview" data-av-animation="animate__jackInTheBox"></div>

Full Example

A typical working example (minimal) might look something like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My AniView Page</title>
    <!-- use the correct 'animateClass' option for your version! -->
    <link type="text/css" rel="stylesheet" href="animate.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.aniview.js"></script>
    <script>
        $(document).ready(function(){
            $('.aniview-v3').AniView();
            $('.aniview-v4').AniView({
                animateClass: 'animate__animated'
            });
        });
    </script>
</head>
<body>
    <div>
        <p class="aniview-v3" data-av-animation="slideInRight">
            This is my awesome animated element using v3!
        </p>
        <p class="aniview-v4" data-av-animation="animate__jackInTheBox">
            This is my awesome animated element using v4!
        </p>
    </div>
</body>
</html>

Notes

Any element already in the viewport when the user loads the page will have it's animation triggered immediately if one has been set. In other words, it will not wait for the user to begin scrolling before initiating the animation on these elements.

Contribute

Bugs or feature requests/contributions can be done via:

https://github.com/jjcosgrove/jquery-aniview/issues

Authors

  • Just me for now.
Comments
  • No responde adecuadamente con el scroll del mouse

    No responde adecuadamente con el scroll del mouse

    Cuando cargo la pagina directamente en una sección que posea aniview o utilice el scroll del navegador las animaciones funcionan correctamente. Sin embargo, cuando utilizo el scroll del mouse para descender en la pagina hasta una sección que posea animaciones, estas responden en 3s aproximadamente (Lo que deja la pagina sin el contenido durante esos 3s) si durante esos 3 segundos hago un click en la pagina la animación se activa, pero si solo voy bajando con el scroll del mouse sin hacer click en la pagina estas se activan luego de un rato (Lo que da la sensación de que en el sitio web no hay contenido o demora en cargar) ¿Como puedo resolver eso?

    help wanted 
    opened by xcesaralejandro 8
  • This does not work when locally hosted.

    This does not work when locally hosted.

    I even downloaded your original site [http://jjcosgrove.github.io/jquery-aniview/]

    All of the animation plays on load and none of it plays on scroll.

    Any ideas?

    opened by tosborn-ODW 5
  • Remove div.av-container / Destroys layout

    Remove div.av-container / Destroys layout

    Can you add the feature to disable the output of the outer div : <div class="av-container av-visible"> ... </div>

    I use a complex layout and this div destroys my layout, because I use absolute positioning in child divs.

    Furthermore the :nth-child(n) selector on my original layout is not working anymore.

    enhancement considering 
    opened by godsdog 5
  • Animations don't work unless using old version of animate.css

    Animations don't work unless using old version of animate.css

    I was replicating an example you have (https://github.com/jjcosgrove/jquery-aniview#full-example), and it does not work unless I grab the old version of animate.css you use on your main site (https://jjcosgrove.github.io/jquery-aniview/).

    I am able to use the latest versions of jquery and jquery-aniview for that example, but not the latest version of animate.css because it prevents the animation from playing.

    I am not sure if this is simply my fault, or if there is a compatibility issue somewhere.

    opened by testcodeaccount2 3
  • Code is not running perfectly

    Code is not running perfectly

    I have used your provided code and add downloaded jquery.aniview.js and cdn of jquery . But still it is working correctly means not showing jquery effects.

    Can you tell me any solution

    help wanted question 
    opened by Manisha-Bajaj 3
  • Wrong Loading !

    Wrong Loading !

    #Hi! It´s the first time i use this plug-in. My problem is that the plugin works but all the elements make they´re animations together when the page is loaded, not by appearing in the screen as it should be.

    Here´s an example: http://c0170479.ferozo.com/aniview.html

    I´m sure its a really stupid problem and I´m not getting it. Hope you can help me using it. The plugin idea its great!

    help wanted question 
    opened by NicolasOkro 2
  • create a package for npm

    create a package for npm

    As you may already know, jQuery Plugins repository has gone to “read only” mode and thus the authors of jQuery plugins have been advised to create packages for npm out of their plugins.

    Consider creating a jQuery AniView package for npm.

    opened by Mithgol 2
  • Prefix 'animate__' for Animate.css V4 classes

    Prefix 'animate__' for Animate.css V4 classes

    Hi, thanks for the package!

    I tried for ages to get this working, and then realised it doesn't add on the new prefix to the classes that Animate.css v4 requires.

    This now adds 'animate__' before the classes required - for example:

    <div id="animatethisdiv" class="animate__animated animate__fadeIn">Fade me in</div>

    Thanks, Chris

    opened by pangers101 1
  • animated update

    animated update

    Hi There the animated got updated and now it is using an animate__ as class mark, i did one update in my aniview.js with

    added line2 const animateCalss = "animate__animated"; line 64 (before 63) $(element).addClass(animateCalss + " " + $(element).attr('data-av-animation'));

    now its working nicely

    opened by valtingojer 1
  • How to use with Picture image tag?

    How to use with Picture image tag?

    Basically I tried two ways first adding the class "aniview" to the image fallback like this, but the problem is that it doesn't make use of the source sizes.

    <picture >
                 <source media="(max-width:1369px)" data-srcset="<?php bloginfo('template_url');?>/img/servicios-01-disenopesonalizadov10-x1020.png">
                  <source media="(min-width:1370px)" data-srcset="<?php bloginfo('template_url');?>/img/servicios-01-disenopesonalizadov10-x1526.png">              
                  <!-- Fallback 2x tamaño -->   
                  <img style="max-height: 494px; filter: drop-shadow(0px 0px 41px #e6e6e6);" class="lazyload imagen-servicios mb-5-custom mr-n4 mr-lg-n5 mr-xl-n5 aniview" data-av-animation="customZoomIn" data-src="<?php bloginfo('template_url');?>/img/servicios-01-disenopesonalizadov10-x1526.png" alt="Diseños web Personalizados"> 
               </picture>
    

    The other option is to set aniview class directly in the picture tag like this <picture class="aniview" data-av-animation="customZoomIn"> but then this causes weird behaviors, for example drop-shadow property doesn't that quite work well.

    opened by tomasts248 1
  • aniview with keyframe that shows opacity: 0

    aniview with keyframe that shows opacity: 0

    There have one problem from my project, when I use keyframe animation with aniview, it happens the opacity always is 0 can not over it, even I use !important at my css. is anyone can give me a suggestion?

    *my keyframe have to infinite floating, so that it no suit for the show out.

    opened by kmon25 1
  • Inline child animation

    Inline child animation

    Added a small block of code to RenderElementsCurrentlyInViewport function that will allow for different animations to be applied on direct children of ".aniview" block element. This should improve use if user wants inline elements within a block to animate differently but retain their inline styling.

    Will most likely need further support for children of children and other unforseen cases, but I think a good start to more support.

    opened by sean6bucks 0
Owner
Jonathan James Cosgrove
Jonathan James Cosgrove
A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Matt Milburn 53 Dec 30, 2022
A tiny JavaScript library to enable CSS animations when user scrolls.

A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe

Matthieu Bué 35 Nov 24, 2022
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
A simple to use Harmony Extension that notifies you, when your favorite streamers go live!

THE Twitch Extension for your Deno-based Harmony Discord Bot Notifies you if your favorite streamers go live Usage In order to use this extension it i

null 1 Apr 1, 2022
🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

?? TypeScript Primitives type TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types

CodelyTV 82 Dec 7, 2022
A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman".

birdman.js A JQuery plugin to animate text as in the credits of the 2014 movie "Birdman". See it in action at chrisma.github.io/birdman.js I'm aware t

Christoph Matthies 33 Dec 30, 2021
(Experimenting) Transform CSS Modules to enable Atomic CSS benefits 🌱

MatoCSS Transform CSS Modules to enable Atomic CSS benefits Please note that it is still experimenting. I do not recommend using this in production. U

Huy Nguyen 4 Nov 24, 2022
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.

Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @

Code Chemistry Inc. 9 Nov 19, 2022
animate.css as a Tailwind plugin

tailwind-animatecss Use animate.css as a Tailwind 3 plugin. Demo – https://dumptyd.github.io/tailwind-animatecss Table of contents Installation Usage

Saad 42 Dec 19, 2022
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin.

Fullscreen Scrolling Slideshow A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin. Article on Codrops Demo

Codrops 84 Jan 3, 2023
Simple and flexible, css only, content placeholder loading animation.

Placeholder loading Simple and flexible, css only, content placeholder loading animation. Demo https://zalog.github.io/placeholder-loading/ Take a loo

Catalin Zalog 1.4k Dec 30, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022
Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works. You all can share your ides/works here.

Hacktoberfest Submit your Work Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works.

Chinmay Patil 3 Oct 5, 2022
A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders!

Sliderland A (very) minimalist creative coding playground. Make animations using only 64 HTML sliders! Credits The recording feature uses ffmpeg.wasm

null 181 Dec 30, 2022
StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Crytic 6 Nov 4, 2022
An Obsidian plugin that allows adding iframes with custom styling as editor tabs. Also comes with presets for Google Keep and more.

Obsidian Custom Frames An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep an

Ellpeck 208 Jan 8, 2023
This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

Obsidian Timestamp Notes Use Case Hello Obsidian users! Like all of you, I love using Obsidian for taking notes. My usual workflow is a video in my br

null 74 Jan 2, 2023
Kuldeep 2 Jun 21, 2022
The only Backend you'll ever need. Written in NodeJS, works with any stack

The only Backend you'll ever need. Written in NodeJS, works with any stack Conduit Platform Conduit is a NodeJS-based Self-Hosted backend, that aims t

Conduit 225 Jan 3, 2023