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
1 answer

wow.js and fullpage.js animation firing on BOTH scroll into / out of viewport

I have an issue with Wow.js and Fullpage.js. I've managed to get them working together, here is the script: $(document).ready(function() { $('#fullpage').fullpage({ 'navigation': true, 'navigationPosition': 'right', scrollBar:…
Lance Walker
  • 83
  • 8
0
votes
1 answer

wow.js in Ruby on Rails with Webpack and Yarn

I am pretty new to rails. I wish to add some cool transition effects on my landing page using wow.js (https://github.com/matthieua/WOW) I installed wow.js using yarn add wow.js I created a new wow.js in my javascript asset pipeline with the…
Chris
  • 1
  • 1
0
votes
1 answer

Unable to show images in slider

I'm new to rails and stack over flow, I would be grateful to you all if I can guided here. I'm developing a test site which is like a personal blog just to add portfolio for one user. I have a scaffold "Images" which is used to add images in the…
Peeyush Verma
  • 3
  • 2
0
votes
3 answers

How to activate an animation after another animation has finihed

I have a code snippet (below) that I want to animate when you scroll to it. It is working but the classes that animate the circle are activating at the same time which makes it look wrong. How can I get the circle to fill up normally and not in two…
Emma Dalby
  • 183
  • 1
  • 2
  • 15
0
votes
1 answer

Animation of items with WOW.js which are in the viewport

i have a list of items which are contained in viewport, that means when i load the page they all are animated all at once. but i want them to animate one after the other. $(function(){ new WOW().init(); }) here is my…
Kaleem Nalband
  • 687
  • 7
  • 21
0
votes
1 answer

React Wow is not a constructor

I am trying to add Wow.js to my react app. Here is a link to my codesandbox. I Have imported wow.js 1.1.2 and animcate.min.css 3.5.2. In my index.js I have imported animate.min.css import "./animate.min.css"; and in my App.js I have imported and…
user908759
  • 1,355
  • 8
  • 26
  • 48
0
votes
0 answers

change wow js animation starting point

Jsfiddle I have used wow js for animating few sections in my website. It worked perfectly. But I found that the animation is coming from the edge of the website. It took long way to come to the middle. So it's not looking nice. How can I adjust…
Janath
  • 1,218
  • 4
  • 26
  • 53
0
votes
0 answers

Animate element on scroll and pause animation if scrolling stops

I am trying to animate some elements with css animations on a page when scrolling occurs and I wish to pause these animations if user stops scrolling. This Sony be moved website illustrates the effect I am trying to achieve quite well. However, this…
Madeirense
  • 79
  • 1
  • 10
0
votes
0 answers

why I get an error with wow.js in server

I want to use wow.js in my project. On the local computer, it's ok. But when I published the project to the server.I get an error following this screenshot. And the animation won't work. What should I do ?
ohmygod
  • 26
  • 5
0
votes
1 answer

WOW.js - how to avoid data-* attributes?

I'm using WOW.js to animate a few div containers and would like to avoid the data-* attributes. Example HTML
Content
Example JS var wow = new WOW({ boxClass: …
Mr. B.
  • 8,041
  • 14
  • 67
  • 117
0
votes
1 answer

WOW js animation repeat not working

I'm using wow.js for some animations on my website and it's working great, but I'd prefer it to re-animate every time someone scrolls past it. I checked everywhere online and I've tried the code snippet from here, but it doesn't seem to work. Any…
user7663387
0
votes
1 answer

wow.js, works in Vue component but visibility:hidden; is not being overwritten in native html

Just paid for a commercial licence and trying to follow the docs but can't get the animation to work I am using Laravel 5.4 and Vue 2
…
Dazzle
  • 2,880
  • 3
  • 25
  • 52
0
votes
1 answer

WOW.js and scrolling div

I followed this tutorial using wow.js. I uses it in a div, not for the entire page. I scroll the div, not the page. And this Javascript doesn't work . What do I need to fix?