Reveal CSS animation as you scroll down a page

Last update: Jan 8, 2023

Related tags

Overview

WOW.js

Reveal CSS animation as you scroll down a page. By default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.

Advantages:

Smaller than other JavaScript parallax plugins, like Scrollorama (they do fantastic things, but can be too heavy for simple needs)
Super simple to install, and works with animate.css, so if you already use it, that will be very fast to setup
Fast execution and lightweight code: the browser will like it ;-)
You can change the settings - see below

Follow @mattdelac_ for updates as WOW evolves.

LIVE DEMO ➫

Version

1.1.3

License

Commercial license

If you want to use WOW.js to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a WOW.js Commercial License at uplabs.com/posts/wow-js-commercial

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.

Documentation

It just take seconds to install and use WOW.js! Read the documentation ➫

Dependencies

animate.css

Installation

Bower

   bower install wowjs

   npm install wowjs

Basic usage

In order to hide all elements when they are supposed to be hidden. (Anti Flickering)

CSS .wow { visibility: hidden; }
HTML

  <section class="wow slideInLeft"></section>
  <section class="wow slideInRight"></section>

JavaScript

new WOW().init();

Advanced usage

HTML

  <section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>
  <section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

JavaScript

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null // optional scroll container selector, otherwise use window
  }
);
wow.init();

Asynchronous content support

In IE 10+, Chrome 18+ and Firefox 14+, animations will be automatically triggered for any DOM nodes you add after calling wow.init(). If you do not like that, you can disable this by setting live to false.

If you want to support older browsers (e.g. IE9+), as a fallback, you can call the wow.sync() method after you have added new DOM elements to animate (but live should still be set to true). Calling wow.sync() has no side effects.

Contribute

You're more than welcome to contribute to this project. Please note: your code may be used as part of a commercial product if merged. Be clear about what license applies to your patch. The MIT license or public domain unlicense are permissive, and allow integration of your patch into this project as part of a commercial product.

The library is written in CoffeeScript, please update wow.coffee file.

We use grunt to compile and minify the library:

Install needed libraries

npm install

Get the compilation running in the background

grunt watch

Enjoy!

Bug tracker

If you find a bug, please report it here on Github!

Developer

Developed by Matt Delac, delac.io

Contributors

Thanks to everyone who has contributed to the project so far:

Attila Oláh - @attilaolah - Github Profile
and many others

Initiated and designed by Vincent Le Moign, @webalys

Comments

Animations on Mobile

Great script.

Is there anyway to disable the animations on mobile devices? I'd rather have no animations for users with a screen width of 800px or below for example.

Thanks a lot
enhancement wontfix

opened by plisvb 22
WOW doesn't work with "One Page Scroll" plugin

Hi @matthieua,

I dunno if you can make something about this.

I tested One Page Scroll: https://github.com/peachananr/onepage-scroll by @peachananr

And WOW is not triggered. Elements are not recognized in the viewport, apparently. Then, elements are always hidden.

Bests

opened by sylouuu 20
WOW.js will only show animation one time on scrolling past it

When you scroll past a animation and scroll back up past it, it will not do a animation again, when you scroll up past it.

I would like it so every time, you scroll past the animation, it does the animation.
wontfix

opened by Randall-Glass 19
Fix animation in Chrome 34 and Firefox 26
This may look hacky, but it is required to make the animation work in the new Chrome version, at least on Linux (I'll run a test on Windows later).

What it does is add

<style> :not(.animated).box { animation-name: none; } </style>

to the <head>. It is required because otherwise the animation gets fast-forwarded by the browser (presumably because visibility is set to hidden by the plugin).
opened by attilaolah 17
Flash on initial load then animates

Is there a way to prevent the flash on initial load as you can see here:

http://wp.contempographicdesign.com/wp_hyperion/?cat=2

I know its caused by the dom not being loaded then it hits the JS and loads the animation, but is there a way around this? Noticed your demo site doesn't have that issue.

Cheers,

Chris
question

opened by contempoinc 16
mobile false not working
hi i have tried to off effect but its not working

var wow = new WOW( { mobile: false }); wow.init();

i have tried with android mobile can you please check. why its not working on mobile device.

Thanks in advance
opened by Ataurr 15
Plugin is broken when CSP is enabled.

CSP enables an extra security layer on websites by being able to specify where styles and scripts can be loaded. In strict cases, this makes browsers refuse to apply direct changes to the style attribute (i.e. box.setAttribute('style', '...')).

WOW looks awesome and light weight, but I wanted to submit this as an issue. I'm working on making it CSP friendly for myself and wanted to see your thoughts on getting it into the plugin itself?

Thanks.

opened by joshmatz 13
Mobile animations only triggered when user stops scrolling

Great library everyone. I am really loving it so far. I did notice one small issue. Currently on mobile the animations are only triggered when the user stops scrolling. Any way to fix this? If not is there a quick solution to disabling all together only on mobile screen sizes? Thanks

opened by jeffcorey 13
IE8 doesn't support anything useful
Hi,

I just downloaded /! WOW - v1.0.1 - 2014-08-15/ and ran the demo ie8 with saucelabs and get an error with ie8.

http://mtc2.taichungdesigner.com/WOW-master/demo.html

Message: Object doesn't support this property or method Line: 320 Char: 9 Code: 0 URI: http://mtc2.taichungdesigner.com/WOW-master/dist/wow.js

Any ideas?

Thanks,

Robert
bug
opened by iamrobert 10
Chrome / Opera conflict issue

Hi guys,

Love the script, I use it all the time.

I am having some trouble figuring out why wow.js is disabling some background images on my site, only in Chrome and Opera. Works perfectly in Firefox and Safari. I've used this script many times before so I am assuming this is a conflict.

If this is something you can spot immediately and help with I would greatly appreciate some advice.

http://howdoyouroll.com/new/franchise/

opened by robbieobbie 10
Fix MutationObserver with webpack

If you are using wow.js with webpack the MutationObserver isn't found without window.MutationObserver (because the whole file is encapsulated in a function).

opened by dvdmarchetti 9
How can I disable the mandatory presence of –webkit-?

How can I disable the mandatory presence of –webkit-, -ms-, -moz- in a css file? The css file is heavy. If remove the outdated -webkit-, then the file size can be significantly reduced. Thanks.

opened by Arksault 0
Animatiosn stopped working on Chrome

Any ideas why animations doesn't work anymore in Chrome?

It shows blue border line animation instead. Tested other browsers and it works fine on Internet Explorer for example.

opened by Xayanix 0
Fixed target.className.replace is not a function issue

resetAnimation function is throw

TypeError: target.className.replace is not a function at WOW.resetAnimation

Those get-set helper functions fot the attributes is useful to the issue.

opened by g-u-r-k-a-n 0

Releases(1.1.0)

1.1.0(Apr 4, 2015)

WOW.js now triggers the animationend event when the animation finishes. This can be used to attach event handlers to e.g. reset the animation (so it would be replayed on the next reveal.) See #164. Thanks @mdeboer!
Source code(tar.gz)
Source code(zip)
1.0.3(Jan 14, 2015)

Add callback support via the config. See Advanced usage in the README.

Thanks to @nlug for the feature request.
Source code(tar.gz)
Source code(zip)
1.0.2(Sep 24, 2014)

This release fixes a minor bug where WOW.js would keep some elements hidden on mobile when animations are disabled (mobile: false option).
Source code(tar.gz)
Source code(zip)
1.0.1(Aug 15, 2014)

This release fixes an IE8 bug. It does not affect other browsers.

Thanks tagrendy.
Source code(tar.gz)
Source code(zip)
1.0.0(Jul 30, 2014)

The first release that we dare call stable. Fixed #82, #88, #92 and #94.
Source code(tar.gz)
Source code(zip)
0.1.12(Jun 29, 2014)

This release fixes a bug with the asynchronous content loading in 0.1.11.
Source code(tar.gz)
Source code(zip)
0.1.11(Jun 29, 2014)

This version fixes a problem with the previous release, and adds a .sync() method that tells WOW to look for new objects to animate. This is only useful in IE9 and IE10, as those browsers do not support the MutationObserver API.

NOTE: there's a bug in this release, please use 0.1.12 or newer.
Source code(tar.gz)
Source code(zip)
0.1.10(Jun 29, 2014)

This release adds support for asynchronously loaded content.

The new feature is enabled by default, but you can disable it using live: false when you call new WOW(…).

See #71 and #74 for details. Thanks @tomasdev for the contribution!

NOTE: there's a bug in this release, please use 0.1.12 or newer.
Source code(tar.gz)
Source code(zip)
0.1.9(May 10, 2014)

This release adds support for SVG animations in Firefox and Opera.

See #67 for details.
Source code(tar.gz)
Source code(zip)
0.1.8(May 9, 2014)

This release fixes a regression in 0.1.7 that broke the animations in Firefox. It also fixes a minor issue with Opera.
Source code(tar.gz)
Source code(zip)
0.1.7(May 7, 2014)
This release adds CSP support and fixes an issue where inline styles would be removed by WOW.js when the animation is triggered. From now on, you can (although you probably shouldn't) write something like:

<p class="wow fadeInLeft" style="background: yellow;"> Yellow background! </p>

…and the yellow background will not be removed when the animation is triggered.

Thanks to @joshmatz for his contributions. He has basically fixed the above issue as a side effect of implementing CSP support.
Source code(tar.gz)
Source code(zip)
0.1.6(Mar 5, 2014)

This release fixes a regression where the plugin would not be initialised when new WOW(…).init() is called before the document is ready.

See #52. Thanks @tjwudi for the report.
Source code(tar.gz)
Source code(zip)
0.1.5(Mar 3, 2014)

You can now turn off animations on Mobile devices if you think animations don't enhance the user experience.

Simply set mobile: false when initializing the library and you're good to go.
Source code(tar.gz)
Source code(zip)
0.1.4(Feb 12, 2014)

This is a bugfix release that fixes WOW not initialising correctly when called during the interactive document state (e.g. inside jQuery $()).
Source code(tar.gz)
Source code(zip)
0.0.6(Jan 29, 2014)
Improve the Grunt compilation workflow

Trigger animations on mobile devices. Disabling it was not a good solution. We need to find another workaround.

Source code(tar.gz)
Source code(zip)

Reveal CSS animation as you scroll down a page

Related tags

Overview

WOW.js

Version

License

Commercial license

Open source license

Documentation

Dependencies

Installation

Basic usage

Advanced usage

Asynchronous content support

Contribute

Bug tracker

Developer

Contributors

Comments

Releases(1.1.0)

1.1.0(Apr 4, 2015)

1.0.3(Jan 14, 2015)

1.0.2(Sep 24, 2014)

1.0.1(Aug 15, 2014)

1.0.0(Jul 30, 2014)

0.1.12(Jun 29, 2014)

0.1.11(Jun 29, 2014)

0.1.10(Jun 29, 2014)

0.1.9(May 10, 2014)

0.1.8(May 9, 2014)

0.1.7(May 7, 2014)

0.1.6(Mar 5, 2014)

0.1.5(Mar 3, 2014)

0.1.4(Feb 12, 2014)

0.0.6(Jan 29, 2014)

Owner

Matt Delac

Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

一个运行在浏览器内的提词器，可翻页，可变速，可自定义字体、大小、颜色等多种选项 A teleprompter in web browser, page down, speed up , custom font family/size/color and more.

I made countdown birthday and fireworks animation using HTML Canvas, CSS, JS. The fireworks animation gonna come out once the countdown is finished or in other words, "Birthday Time".

A JavaScript animation plugin for menus. It creates a div that moves when you mouse over an element, giving it an elastic animation.

Rainbow Table attack to break zkcrush.xyz and reveal your crush.

Chrome Extension To Reveal Observable Notebooks As Quarto QMD {ojs} Blocks & provide downloads of FileAttachments and zipped Quarto project

Smooth scroll animation - vanilla JavaScript

Animation library build on top of web animation API (WAAPI)

Your non mega-corporate Open source PLM. Click the website down below for more information.

Your non mega-corporate Open source PLM. Click the website down below for more information.

Automatically make same-page links scroll smoothly

A javascript library to animate elements on scroll page events

infiniteScrollWithTemplate - JQuery plugin for ajax-enabled infinite page scroll / auto paging with template

A lightweight JavaScript utility to fade elements in and out of view on page scroll.

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

This project is an attempt at recreating the WebGL animation featured in the 2021 Linear release page.

Lightweight and easy to use vanilla js library to add css animations to elements on scroll.