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

130 questions
10
votes
1 answer

How to setup WOW.js in Angular 2 and 4?

I am trying to get WOW.js working in my Angular project but it is not working yet. I am not using webpack so I think the next thread is not answering my question: How to use WOW.js in Angular 2 Webpack?. The steps that I took until now: I…
Klyner
  • 2,884
  • 4
  • 19
  • 39
8
votes
6 answers

How to stop WOW JS + CSS animate on smaller devices?

1) I've looked all over th web and just was wondering if anyone of you guys come across this problem where you wanted to stop the WOW JS animation for certain devices or/and for smaller screen sizes?! 2) Also it's quite annoying to see css the…
ZAD
  • 540
  • 2
  • 6
  • 21
7
votes
2 answers

Repeat animation every 3 seconds

I am using WOW.js and animate.css, right now I am running my CSS to Infinite. I would like know how can I make my class run for 3 seconds stop and start again to infinite? My html: My CSS…
raduken
  • 1,686
  • 13
  • 54
  • 95
6
votes
3 answers

Animations are slowing the performance of web page

I have a single page website design in html, javascript and css. There are lots of images on the webpage and all have different-different animation effects according to their categories. I have used wow.js for animation effects on window scroll.…
M.Bains
  • 395
  • 2
  • 11
6
votes
2 answers

WOW is not a constructor

when I try to require WOW by one of those statements global.WOW = require('wowjs'); var WOW = require('wowjs'); window.WOW = require('wowjs'); I receive this error jQuery.Deferred exception: WOW is not a constructor TypeError: WOW is not a…
Ali Turki
  • 540
  • 2
  • 7
  • 16
6
votes
1 answer

CSS Animation not working properly in wow js

I have integrated the wow.js for my project and i have encountered a problem with animation. The animation class which i used to animate the div is working only if i paste the css class from animate.css into my page as embedded style sheet and also…
Raj
  • 839
  • 1
  • 8
  • 21
6
votes
3 answers

Wow.js repeat animation every time you scroll up or down

I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when…
Automatik
  • 329
  • 1
  • 5
  • 15
5
votes
3 answers

ReactJS with wowJS not working

I can't seem to get wowJS working. I do import WOW from 'wowjs'; componentDidMount() { const wow = new WOW(); wow.init(); } but I get TypeError: _wowjs2.default is not a constructor If I do import { WOW } from 'wowjs'; I get MutationObserver…
Johhan Santana
  • 1,876
  • 3
  • 27
  • 53
4
votes
2 answers

Custom horizontal scroll with animate.css

I have some code: $(window).load(function(){ // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition:…
HamSter
  • 1,312
  • 2
  • 21
  • 47
4
votes
1 answer

How to use WOW.js in Angular 2 Webpack?

I know we need typings file for wow.js but I couldn't find it anywhere. Is there any other solution for loading this external js into webpack?
Tuna Yagci
  • 133
  • 8
4
votes
1 answer

Is possible to load all WOW.js hidden HTML elements on page load?

I have a question that is kind of hard to explain, so bear with me I will try to explain it the best i can. First, let me briefly explain the website I am creating. It starts with a full screen banner and below the banner there is a grid filled with…
cup_of
  • 5,033
  • 5
  • 27
  • 67
4
votes
1 answer

animation wont show hidden blocks

I'm trying to make my own version of wow.js because of two reasons, the first is that it seems that wow.js is not longer maintained, and the second one because it only shows animations once The problem that i have is that my code doesn't show the…
Chico3001
  • 1,513
  • 1
  • 15
  • 32
4
votes
2 answers

Animate specific paragraph using wow.js onclick

I am using wow.js to animate different elements on the page when scrolling. Now I want to rise the animation only on the specific paragraph when clicked on the button (in jQuery).

x y…

Dawid
  • 41
  • 1
  • 1
  • 2
4
votes
1 answer

Triggering animations with parent DIV using WOW.js

I have a parent DIV (.wrap) with multiple images that fadeIn using WOW.js/Animate.css. Each image is positioned Absolute at different locations. I was wondering if there is a way to trigger all animations inside the parent DIV using the parent DIV's…
Paul Ruocco
  • 442
  • 3
  • 12
3
votes
1 answer

react, jquery, gatsby - how to make jquery plugins work in gatsby?

Removed previous description as it's not relevant now. I started with fresh gatsby site and able to make jquery, bootstrap, wow and owl carousel work. layout.js import './expose' import './main' expose.js import 'popper.js' import…
Valay
  • 1,923
  • 2
  • 32
  • 80
1
2 3
…
8 9