Stack Overflow
Stack Overflow

Questions tagged [wow.js]

WOW.js is a JavaScript plugin that reveals animations when you scroll. It is used in conjunction with Animate.css.

WOW.js

WOW.js is a JavaScript plugin that reveals animations when you scroll.

Usage

  1. Link to the CSS animation library

Link to (You can link to another CSS animation library by changing WOW.js settings)

<link rel="stylesheet" href="css/animate.css">
  1. Link and activate WOW.js
<script src="js/wow.min.js"></script>
<script>
    new WOW().init();
</script>
  1. Add rule in CSS to begin with hidden elements:
<style>
.wow {
    visibility: hidden;
}
</style>

Documentation

Source

139 questions
0
votes
0 answers

wow.js don't works correctly with position:relative

I'm building a website and I need some animations. My problem is that I have a block with the following CSS: .description { position: relative; top: 100%; transform: translateY(-100%); } And the block is as follows:
Alvaro Pedraza
  • 1,176
  • 6
  • 20
  • 44
0
votes
1 answer

White space appears when responsive website is resized

I have a responsive website using bootstrap in which almost every element animates in with WOWjs (animates in as you scroll by it.) When I resize the document to test its responsiveness then scroll all the way down, then open it up in full screen,…
Mohammed Ibrahim
  • 23
  • 6
0
votes
2 answers

Initialize WOW animation in angular 2

How do I implement the WOW library in an angular 2 app which displays many components, one after the other, for animating those components on scroll? Where should I initialize the WOW() instance exactly?
Hamza
  • 29
  • 10
0
votes
1 answer

Does the order of what is called in the header of a HTML document matter?

I called WOW.js and Animate.js in a document: Portfolio
John Doe
  • 305
  • 1
  • 2
  • 10
0
votes
3 answers

animationEnd event handler - event heard two times

I have a code: $('#sectionName').on('animationend webkitAnimationEnd oAnimationEnd', function () { alert("Hello"); }); which is meant to trigger the alert when animation of #sectionName ends. It does its job but it is also triggered first time…
mdmb
  • 4,833
  • 7
  • 42
  • 90
0
votes
1 answer

jquery click not latching onto bootstrap col-md div

I have a div that's simply defined as:
randombits
  • 47,058
  • 76
  • 251
  • 433
0
votes
0 answers

WOW.js does not work on page reload

I am using WOW.js and skrollr to reveal some animations on my website. I have a navbar with is located 370px from the top of the viewport initially and while the page is being scrolled down and when the bottom of the navbar is 70px from the top of…
tsiro
  • 2,323
  • 3
  • 24
  • 46
0
votes
1 answer

Incorrect viewport size causing animations to not excute on scroll

Note: This has been solved. Look at the bottom of this post for the fix. I have this bizarre issue that I've pulling my hair out over for the past few days. Thankfully I think I've isolated it to an issue with incorrect window / document heights…
Tyrx
  • 101
  • 1
  • 8
0
votes
1 answer

Animsition and Wow JS

I’ve created a new version of my website. I have two problems with the final version. First problem: To sum up, I use the Animsition plugin to start the CSS fade transition between pages and when I scroll, I use the WOW library and Animate.css to…
Gilles Nolorgues
  • 1
  • 1
0
votes
1 answer

Javascript start another animation after fade in

I'm using wow.js (http://mynameismatthieu.com/WOW/docs.html) wow = new WOW( { boxClass: 'wow', // default animateClass: 'animated', // default offset: 0, // default mobile: true, //…
Christine Damon
  • 39
  • 5
0
votes
0 answers

Why CSS animation running twice or jerking?

I used wow.js on my website, the problem is that every time when I refresh the page, it's animate twice instead of one time. Here is video demo how it's happening on my system Demo Here is the page link…
Usman Arshad
  • 868
  • 8
  • 19
0
votes
1 answer

use of wow.min.js with jquery.fullpage.js

I am using two famous plugins wow.min.js and jquery.fullpage.js but when I use both at same page one of them is not working, help me please. I am using these two scripts to call both of them.