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

HTML Wow.js not working (Wrong initializtion or wrong script calls?)

I've been trying to implement wow.js into my HTML code but I'm having trouble making it work. Am I missing script loads or loading the wrong scripts? What might I be doing wrong? Maybe I couldn't initiate wow.js the right way? The code is given…
sad_pug
  • 33
  • 6
0
votes
2 answers

What is the correct way to use wow.js in Rails 6 with webpacker?

I am trying to use wow.js with my Ruby on Rails 6.1.3.2 project. I have installed wowjs with Yarn and I see it in my node_modules folder. I have imported wowjs into my application app/javascript/packs/application.js import WOW from…
acoustic_north
  • 815
  • 11
  • 31
0
votes
1 answer

Wowjs and Animate.css is not working with VUEJS

I am trying to include some animation using either wowjs or animate.css but it doesnt seem to work. Here are the steps that I took. 1st: npm install wowjs in main.js import 'animate.css'; In pages that I would want to use animate
Samuel
  • 225
  • 3
  • 11
0
votes
1 answer

Wow js is not working with the Fullpage JS

I'm adding the ZoomIn animation on the pageload on the image. But animation is not working due to FullpageJS. Here is my code HTML Code:
Globiz Design
  • 13
  • 4
0
votes
1 answer

Trying to add class when the item comes into view with wow.js

I'm trying to add a class when the item comes into view but apparently, I'm missing something that makes wow.js not working here is what I have tried. body{ display:flex; justify-content:center; } .test { width: 500px; …
khaled mahmoud
  • 97
  • 8
0
votes
2 answers

How to add wow.js/animate.css on Shopify?

I am in the process of creating a Shopify store and would like to go a little beyond what the themes are offering. Specifically I am triyng to add wow.js and animate.css. As you can see below, I have added the CDN for Animate.css in the head tag of…
felixo
  • 1,453
  • 6
  • 33
  • 60
0
votes
1 answer

Bounce or fade In texts and divs when shown on the screen React

The part of the animation is very easy I can do it the thing is that I want to animate them when they are shown on the screen and without using pixels and offsets when to be responsive like on the phone mode also etc... And without changing my…
Altro
  • 878
  • 1
  • 7
  • 23
0
votes
0 answers

How can I use WOW.JS properly?

I did all what they say on their "how to use" section. added its JS code (I opted to use a CDN) and the example (class="wow bounce"). but it doesn't do anything. browsing, I found a solution (add .wow {visibility: hidden} from here). okay, there is…
rperdomo
  • 25
  • 1
  • 4
0
votes
2 answers

Django website wow.js and animate.css is not working

I got animate.css to work fine , but when i imported wow.js into my static folder, it did not function on the scroll or just in general. The animation part only works without the "wow" class. As my website is built with django, im not sure if that…
Oliver Weisfeld
  • 25
  • 7
0
votes
1 answer

Wow.js not taking two classes for an element at different time intervals

I have an image element, on which I want to apply two animation classes, one on the arrival and one on some fixed time. For Example, on arrival i want a fadeIn effect. So i do this: img.classList.add("wow"); img.classList.add("fadeIn"); I again…
Sheriff Hussain
  • 224
  • 2
  • 12
0
votes
1 answer

Hidden divs are visible using WOW.js

I have some sections(divs) that are hidden on desktop and shown on mobile, but since they all have the class that triggers wowjs, it puts visibility: visible when you reach the section, therefore making the hidden divs visible on desktop as well. If…
CritingZ
  • 388
  • 2
  • 16
0
votes
1 answer

Correct way of adding wow.js to symfony webpack encore

I'm using Symfony 4.3.3 with webpack-encore-bundle v1.6.2 to develop website. When trying to add wow.js to the front-end, I'm facing with this error: Uncaught ReferenceError: WOW is not defined I ran npm install --save wowjs to install this…
Mahdi
  • 664
  • 3
  • 15
  • 35
0
votes
1 answer

Problem with scrolling when using Wowjs JQuery plugin

I used Wow.js plugin for animations when scrolling but i had a problem that occurs on mobile phones, when you reach Pricings section you'll be unable to scroll for some reason.. I'm using bootstrap 3 by the way I've tried to change the animation…
MiDo
  • 67
  • 1
  • 6
0
votes
1 answer

Combines Wow.js and Slicebox.js to creat animating sliders

I'm a newbie. I found sliceboxjs and wowjs on the internet. I'm trying to create a slideshow that combines sliceboxjs and wowjs. But when I click the Next button for the third time, slicebox and wow only work with the first run. Since then, wowjs…
Hoang Dinh
  • 157
  • 1
  • 10
0
votes
1 answer

Using wow.js inside a scrollable div

I am using a scrollable div with wow js like:

Some Content

Some Content

Some Content

Some Content

Some Content

Some Content

Jhon
  • 99
  • 3
  • 15
1 2 3
…
9 10