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

Problem with AOS.js not working when Slick.js is on the same page

Seems to be a problem to get AOS.js working properly when there is also a Slick.js slider on the same page. How to get this working having both on the page (Slick slider need to be there) I have included the scripts and css
mr_typo3
  • 77
  • 9
3
votes
1 answer

Reusing useEffect code in every component in reactjs

I have a useEffect which initializes wowjs in a component like so: import WOW from "wowjs"; const HomePage = () => { useEffect(() => { const wow = new WOW.WOW({ boxClass: "wow", animateClass: "animated", offset: 0, …
Sushmit Sagar
  • 1,412
  • 2
  • 13
  • 27
3
votes
2 answers

WOW.js : MutationObserver is not supported by your browser

This warning is showing in the browser.
Chiranjeev Prajapat
  • 31
  • 2
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,991
  • 2
  • 43
  • 98
3
votes
1 answer

Angular increment variable in ng-for

I am looping on a list of links with ng-for. Using a plugin called wowjs their icons are supposed to appear each one with a different duration. The first appears the fastest, the last one appears the latest. In order to make this work, you need to…
Scaraux
  • 3,841
  • 4
  • 40
  • 80
3
votes
3 answers

Change the direction of animation

I am using wow.js with animate.js to show animation on mouse scroll. I want to change the direction of animation on small device like on large screen it should animate from right and on small device it should animate from bottom. Here is a snippet…
AG_
  • 2,589
  • 3
  • 20
  • 32
3
votes
0 answers

wow.js issue - In one section of site animation only works at mobile size

On my website I have a section with 3 columns (with bootstrap), at the mobile size the stack on top of each other and line up next to each other at the bigger sizes. Now what it supposed to happen is that on scroll they should appear with the zoomIn…
jmzelaya
  • 31
  • 4
3
votes
2 answers

Wow js not working with scroll

I am using wow js and animated.css its fantastic I really enjoy I just got a small problem when i tried run a effect when the user scroll 500px. I can see the jquery is inserting the class for run the effect but I can't see the effect, as well if my…
raduken
  • 2,091
  • 16
  • 67
  • 105
3
votes
0 answers

How can I animate an element within a fixed position DIV using wow.js?

I'm attempting to use wow.js to animate items as they scroll into view. The items I wish to animate are within a fixed position DIV on the page. However, wow.js doesn't want to animate the items as they come into view, which I'm guessing is because…
Adam Shiver
  • 31
  • 4
3
votes
1 answer

How to animate fixed div without having to scroll to top with WOW.js and BS3

I am using WOW.js to animate a navbar which is fixed to the top with navbar-fixed-top. Unfortunately if i am already paste the top, the navbar wont be animated until i goto the top of the page again. Is there a way to force that particular part…
JavaCake
  • 4,075
  • 14
  • 62
  • 125
3
votes
3 answers

Wow + jquery + animate div shows on load and then appear again

I am using jquery + wow + animate for some appearing div animations on page. Everything is working except my page is not loading smoothly. Divs which should appear smoothly first appear on page load, then hide and after it they appear with…
emir
  • 1,336
  • 1
  • 14
  • 33
3
votes
0 answers

different data-offset for mobile media query wow.js

I have wow.js on my site and on some elements I have an attribute data-wow-offset="200" so the animation starts 200px below the element when the screen scrolls past. My problem is that on mobile that is actual too far down so it looks like there is…
Keith Power
  • 13,891
  • 22
  • 66
  • 135
3
votes
2 answers

fullPage.js with wow.js animations

I am making my first website with full Page and wow plugins. My problem is that wow animations aren't loaded after page is scrolled down. I tried to add animation class to the div after loading page, but it doesn't work. Any ideas how to do it…
wortigern
  • 181
  • 2
  • 14
2
votes
1 answer

WowJs React UseEffect

import { useEffect } from 'react'; import WOW from 'wowjs/dist/wow.js'; import React from 'react'; import '@/assets/styles/scss/main.scss'; function MyApp({ Component, pageProps }) { useEffect(() => { const wow = () => { new…
Emmathem
  • 103
  • 1
  • 1
  • 10
2
votes
0 answers

Content jumping after animation in chrome browser in mobile

I am currently trying to add animations to various elements of this page using 'Animate.css' and 'Wow.js' jQuery plugin. When I am viewing this page on a mobile browser, especially on chrome then after scrolling to a section the animation runs but…
Lalit Pal
  • 310
  • 1
  • 5
  • 14
1
2
3
…
9 10