jjcosgrove / jquery-aniview Goto Github PK

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.

Hi! I've been playing around with Aniview and I keep running into the problem of having all my animations play at once. I think I've imported all the necessary components (jQuery, animate.css, aniview.js, initialization script) but my problem still persists. I've attached a link to this https://warrenlai.me/ubiquity-repositories%20av.html

Could this be a problem regarding the note below?

"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."

Is it possible (or could it be made possible) to have this activate inside a scrolling div instead of the whole page?

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.

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

i don't know if that's why i use jquery version 3.4.1 any idea?

Thank you for your work!

Could you add destroy method or option "remove", please?)

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?

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.

#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!

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.

All I did was to add an "aniview" animation to two elements. It works partly as intended. The animation is fine and all that, but for some reason, it alters the background color of the element.

Notice how aniview alters the background color of the element, why does it do this? Is this a bug or did you purposely code aniview to behave like this? It doesn't make sense.

Please, explain yourself.

Notice only the first div child to ".bullet-points" has been given an aniview animation.

View gif: https://gyazo.com/5ae62ef17ce934a1febe74c4b0bc18e9

html

				div.bullet-points
					div
						h2.aniview.fast(data-av-animation="slideInUp") Stronger
						p.aniview.slow(data-av-animation="slideInUp") You will become stronger
					div
						h2 Faster
						p You will become faster
					div
						h2 Better
						p You will become better

I integrated this in a WordPress site and realized that Aniview will not work unless

!function()

is changed to

!function($)

near the beginning

and

()

is changed to

(jQuery)

near the end in jquery.aniview.min.js.

This is most probably because the jQuery library included with WordPress is set to the noConflict() mode per https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers.

You might want to make this change in jquery.aniview.js and jquery.aniview.min.js if necessary.

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

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?

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.

GoogleBot (crawler in general) doesn't like opacity setted to 0 and ignore it.
How is it possible to exclude aniview.js from the crawlers?

Shouldn't the attribute name for the animation type start with "data-", like "data-av-animation"?

Because otherwise the document is not valid HTML.

Regards
Eduard