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
2
votes
2 answers

Jquery on hover and focus apply classes plus data-delay iteration

I'm trying to figure out how I can make my list items in a list fadeInUp with a delay on 100ms per list item. I have made this so far and it does apply the classes to animate it and the attribute with a value of 100ms increase per list item. But…
Mikkel Madsen
  • 347
  • 2
  • 5
  • 17
2
votes
0 answers

Wow.js on elements with background images on Safari display incorrectly

I am using Wow.js on my site and it works fine on all browsers (even IE...) except Safari (running on windows). I am using Bootstrap 3. I see the following error in the console: MutationObserver is not supported by your browser. wow.min.js:2WOW.js…
MP_Webby
  • 916
  • 1
  • 11
  • 35
2
votes
1 answer

Wow.js offset equal to element height

According to the wow.js documentation I can set the bottom offset at which the animation will trigger: wow = new WOW( { boxClass: 'wow', // default animateClass: 'animated', // default offset: 0, // <…
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
1
vote
1 answer

Wow.js in React - Uncaught TypeError: Cannot set properties of undefined (setting 'getPropertyValue')

I'm trying to get wow.js working in a new application, and I can't find an answer to the error I'm getting. The strange thing is that I have already done it in other personal projects, and it has worked perfectly. The only difference I find compared…
Martin Galenda
  • 13
  • 4
1
vote
1 answer

html elements not animating after correctly configuring animate css and wow js

Link to my live website, https://travelaja.vercel.app/ I followed the animate.css and wow.js documentation on how to configure the libraries to work and correctly did that after initially misconfiguring the script. I added the animate.css and wow.js…
oyerohabib
  • 187
  • 3
  • 16
1
vote
1 answer

How to automatically detect an HTML tag if it contains a certain attribute?

How to automatically detect an HTML tag if it contains a certain attribute like data-wow-delay? This is from wow.js. What I want to do is that if an HTML tag contains the said attribute, it will automatically add the classes wow bounce in the…
Noxin D Victus
  • 386
  • 1
  • 5
  • 17
1
vote
0 answers

How to fade in image when scroll to image and remain fade in until page is refresh

I'm trying wow.js library for fade in animation when scroll to that div and remains fade in until page is refresh again but wow.js library is not working as expected it loads div before reaching to div
jyoti
  • 99
  • 1
  • 8
1
vote
1 answer

WebpackError with wow.js and Gatsby

When I try to build my gatsby project with wowjs it tell me : 'WebpackError: ReferenceError: window is not defined' or '"window" is not available during server side rendering.' I tried a lot of thing like on this website:…
ogtm
  • 259
  • 1
  • 2
  • 10
1
vote
1 answer

Animation on scroll in VUE.JS like wow.js

I want to add animation to some blocks when scroll at my vuejs site, like wow.js Maybe you now how i can do that? Thanks
Yurii Space
  • 186
  • 1
  • 8
1
vote
1 answer

How to fix the problem of animation starting only after the full page loads?

I would like to animate a phrase in a wordpress site with a help from animate.css and wow.js. When I reload a page the phrase I would like to animate appears like a ordinary text and only after that the animation starts to happen. I tried to change…
brad_fresh
  • 129
  • 1
  • 11
1
vote
0 answers

Wow animation: what if JS fails?

I'm using Wow.JS to animate website elements. To prevent elements from first 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…
Jochem Gugelot
  • 11
  • 2
1
vote
1 answer

Can't get wow.js and animate working on my wordpress installation

I can't get wow.js to work with animate and fullpage. I'm currently on WAMP so can't share a link. It loads all the scripts, checked that in the network tab, wow is loaded before body and it's initialized. I got some sample dummy index.php code to…
Per
  • 97
  • 1
  • 1
  • 8
1
vote
1 answer

How can I use wow.js and animate.css without affecting SEO?

I'm using wow.js and animate.css for my homepage. I read a topic from MDBootstrap and others discussions in which people say that it is bad for SEO. So I checked in the brwoser and saw that everything with the wow class is in "visibiliy : hidden".…
blogob
  • 490
  • 5
  • 19
1
vote
1 answer

Wow JS hiding elements when page is loaded

I have a div element that I'd like to slide out on scroll. I've applied the slideOutLeft animation and included the data-wow-offset parameter and the animation itself works, but unfortunately when I load the page initially, the animated element is…
pfbarnet
  • 101
  • 10
1
vote
1 answer

data-wow-duration vs animation-duration?

This post is in relation to animate.css and wow.js. This might be a very silly question but what is the difference between animation-duration and animation-delay vs data-wow-duration and data-wow-delay? Thank you!
D Lee
  • 11
  • 1
  • 3
1 2 3
…
9 10