I want to load the animation only when the window or tab is focused. I don't want the animations to star immediately when I open the page on a new tab. Is there a way to do that? Thanks in advance.

Hello friends,

I have been trying to use WOWjs in a Wordpress Theme but trying different ways (putting it in a script in the body, in the header, in a separate js file, putting it in the footer) EVERYTHING has been unsuccessful. You keep getting the error that WOW is not defined. I hope you can help me.



Super Thank You!

I have some parts of the website that are only visible on mobile, the Hide classes are with visibility: none, but because I have the wow class on the children elements in order to animate them, it makes them visible on desktop as well. Since I have reached the section it puts visibility: visible;
I do not wish to change the Hide classes to use display: none, I prefer the Visibility one. Is there any way around this?

I try to use wow.js with animate.css, how ever, it not works when I use CDN Link from official site of animate.css.
But when I use old version, it works.

Wow js not working with Angular 6

Can someone clarify for me the license of this library. Is it MIT?
Why is the site UpLabs charging for a license?

Animations are revealing correctly on scroll, but can we make them animate on hover?

Would be good for buttons etc.

Have tried this (and similar variations) without luck:

.button-element:hover {
animation: jackInTheBox 2s;
}

https://wowjs.uk/ is blocked in India.

See this for why: https://github.com/captn3m0/hello-cloudflare/

See this for the fix: https://github.com/captn3m0/hello-cloudflare/blob/main/README.md#help-my-website-is-blocked

Hi there.

I have tried to use it with https://raw.githubusercontent.com/daneden/animate.css/master/animate.css but it did not work.

I have copied https://wowjs.uk/css/libs/animate.css and looks like it's working.

Any ideas on this?

Ty!

Everything loads fine on desktop but when the mobile: false setting is set in the init code, I get the following error:

"Uncaught TypeError: this.boxes.push is not a function" from wow.js:1:4068

The init code is:
(function ($) {
new WOW({offset: 100, mobile: false}).init();
})(jQuery);

Hi! A new version of animate.js has been released, I think it's time for you to update too!

Fliplingo
https://www.fliplingo.com

"The UpLicense gives you the right to use an product purchased from the Uplabs Store for personal use or as part of a commercial project, for yourself or a third party. However, the product cannot be redistributed for free or sold, on its own or in a bundle, where it constitutes the core value of the end product."
IMO, this is illegal distribution of wow.js. I dont understand the law basis of this. Why the website also copy original site? Any clarification? Did I just accidentally steal software?

Hey there,

i noticed that when you combine wow.js with rellax.js (parallax lib) elements gte hidden by wow.js when you scroll to an element which makes use of both libraries and the change the window width ob the browser:

any ideas?

Hi! How can I set delay time between each iteration?

Is there any way to run animation every time reach the section

the page loads and the animation plays and finishes.. expected not to animate again

for a certain reason i need to display none the wrapper of one of the animated elements and show it back on a certain condition..

when i show it back the animation inside this wrapper plays again..

how can i stop this behavior??

how can we for example add a class that stops any attempt of the animation after that the element has already animated..

Seems to be an issue on a client website, https://scattervolt.com where the animate.css library loads before the animations with wow.js do. Any fix?

Hi there . Really like your wow project.
and may I ask is wow support latest version of Animate.css ?
here is the official website of Animate: https://animate.style/
I found that wow instructions running class is different than animate latest version.

I use wow to animates few element on my page with success.

I wish to use wow to trigger other js functions when item are visible.
I try to use callback option but it doesn't seams to work

var wow = new WOW(
    {
      callback:     function(box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
        console.log("!! WOW !!");
      }
    }
  );
  wow.init();

the animations are triggered, but nothing is logged

I have some percentage circles on my page and they are further down the page as a lot of content is above it - e.g;

lots of content pushing the circles down the page so that you can't see them
circles I'm trying to animate on scroll
I would like to know how to use wow to be able to activate the circle's animation when I scroll down to them as at the moment they are activating when I cannot see them.

My code is here: https://codepen.io/digitalbydefault/pen/LJYPXw

Please, can anyone point me in the right direction?

thanks

When we scroll the webpage having wow animations, while loading animations of the content, the website components get place wrongly , leaving a big temporary offset on X direction. when the animation gets completed , they get back to their desirable position again. This makes the website ugly on mobile devices, and We would like to have animations on mobile site.

NgwWowModule is not compatible with Angular Ivy

Hello @graingert

First of all I have to say that my knowledge about licenses is practically inexistence.

I have found your code by googling. I have to say that it's works nicely. But reading your readme i look that you "forked" the code from another repository, that repository have a payment license but yours is MIT(Which I think that is free to use)..

How it can be?

Thanks for your work!
Greetings.

Why do I get this error when I try to use wowjs with webpack?

Please, add the possibility to specialize an animation duration as an option in WOW object arguments.

"animation-fill-mode: both" attribute clashes with the boostrap 3 modal popups.

It causes the class "modal-backdrop" to appear in front of all the others

If you remove the css attribute, it causes the content to flicker once before loading.

n.b. I am using animate.css along with wow js.

Any solutions?

The latest version on Github releases is 1.3.0

But the latest version on NPM is 1.2.2

hello, can i put the init-Code directly into the js instead in a script tag? wow does not run since i implemented a csp header because the init-code is recognized as an inline script which are ignored. I am not used in js, so, if it is possible, i would need the whole lines to put in with all the ({; and so on
Can anybody helpp me? Thanks in advance, Silke

I herby inform you about the Termination of the provisioned subdomain (wow.js.org). The subdomain will be removed in 7 days. see ToS $3 3 :

JS.ORG may also terminate the provision of a certain or all subdomains. Concerned users will be notified at least 7 days in advance by an issue in their GitHub repository

A few days ago, 'Animate.css' was updated to v4 with breaking changes.

https://github.com/animate-css/animate.css/releases/tag/v4.0.0

The difference with v3 are as below:
. add prefix to all classnames.
(fadeIn -> animate__fadeIn, animated -> animate__animated, and more...)

. utility attributes was changed to utility classnames.
(ig. delay attribute was changed to 'animate__delay-2s' class )

I'm trying to implement them now, please just moments. ( When done, I'll make a pull-request. )

Hi!
I'm trying to use wowjs in React app and everything was fine, until I moved the project to SSR.
Since on server we have no window object it says:

/client/node_modules/wowjs/dist/wow.js:336
      if ('requestAnimationFrame' in window) {
                                     ^

ReferenceError: window is not defined

Is there any possibility to review the lib and include SSR support?

I just started using wow.js and testing it in my mobile browser I noticed that the viewport becomes larger creating a horizontal scroll. I think the reason for the overflowing is that the animations like fadeInLeft, fadeInRight and similar ones start outside of the viewport.

1 - Viewport bug: On mobile browsers the width becomes larger than 100%.

2 - To solve it I add some lines in my CSS to hide the overflow-x of the <body>.

This solve the problem, but I wouldn't like to do a MacGyver on every page I create. In animate-plus.js, for example, this behavior is defined right in the JS file to avoid quick fix in CSS. So my question is:
Is there a way to solve it directly in WOW.JS ?

Best regards,
Jaris GV

Hi Team,
I'm Using React JS
while calling this function
new WOW().init(); showing error like this

I'm Using Script and Css File

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" />
How to Resolve this Issue

I tried using WOW.js with the latest version 4.1.0 of animate.css from cdn.js and it didn't work, had to revert to an earlier version of animate.css (3.7.2) as I had used it in an earlier project.

Just for the sake of future users.
Love the work you guys put in to get it free for all to Use.
This is just my little way of saying thank you :)

J.D Braide

Hello author,
In an asynchronous request in Vue, when I jump back to the previous page, WOW has no way to execute the animation immediately, but needs to have a scroll before the animation is executed.
Is there a way to perform CSS animation immediately after initialization?
I've tried it in mounted(), activated(), and $nextTick(), and I can't perform CSS animations immediately after returning to the previous page.

I would like to know if a new version is expected to be launched, this project is very good.

@graingert I just wanted to thank you for this great drop-in replacement for npm package wowjs, which had me scratching my head all afternoon. After installing your fork wow.js everything worked like a breeze in my react/webpack app. Thanks for your hard work.

Hello, I have this:

<div class="container">
	<div class="row">
		<div class="col-lg-6">
			<p>This text displays fine.</p>
		</div>
		<div class="col-lg-6">
			<p>This text also displays fine.</p>
			<p>In the image below, if I remove the wow class, I can see the image.
			   If I leave the wow class, the image is not displayed only when the
			   size of the window is md, for example, 977px wide.</p>
			<img src="some-image.jpg"
				class="img-fluid center-block wow fadeInRightBig"
				data-wow-delay="0s"
				data-wow-duration="1s"
				data-wow-offset="200"
				alt="Some image" />
		</div>
	</div>
</div>

In the image some-image.jpg, if I remove the wow class, I can see the image.

If I leave the wow class, the image is not displayed only when the size of the window is md, for example, 977px wide.

I tried removing the img-fluid and center-block classes but it still doesn't work.

It works fine in Bootstrap 3, the problem is only with bootstrap 4. I am using the latest version of wow.min.js and animate.css and bootstrap 4. Thanks.

Hy guys,

I'm having this annoying effect where the div is shown before the animation starts resulting in an annoying effect. Look at this:

I'm using the default settings and these are the relevant DOM elements:

          <div class="about-image wow fadeInRightBig text-center" data-wow-duration="1s" data-wow-delay="0s"
               style="z-index: 90; filter: drop-shadow(0 0 30px #333);">
            <img...>
          </div>
        
          <div class="text-center wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0s">

is that normal or is there something that goes in conflict? Thanks.

Hello, is there a way to make sure that the animation runs only once?

I have tried using data-wow-iteration="1" but it didn't work.

How can I have this feature?

To prevent elements from 1st showing, then disappearing and then appearing again (animation) when using wow, I added the CSs line: .wow { visibility:none;}

However, this causes elements to stay hidden when JS fails or disabled in browser. For that, I created this little / script function:

<!-- wow backup -->
<noscript><style>.wow {visibility: initial;}</style></noscript>
<script>window.onload=function(){elem = document.querySelector('.wow');style = getComputedStyle(elem);if (style.visibility=='hidden') {style = document.createElement('style');document.head.appendChild(style);style.sheet.insertRule('.wow { visibility:initial;}');}}</script>

Im using parallaxImg with WOW but all the animations start when the page load, it ignore the trigger from scroll. Any ideas?

I want to reveal animation , but there is a problem:
after animated, the wow elements area all visible,
then scroll down ,
then scroll back , re init wow again ,
the wow elements is firstly visible and then animate

Animation all working on scroll inside a scroll container. but data attribute thing is not working.

If the window size is high enough, then the objects that are in viewport will not be animated until the window size is reduced. This can be tracked if you open the site from your phone (full version of the site in your mobile browser)
Video:
https://yadi.sk/i/paifxQ7B7Xg2UQ