PHPackages hellosanta/wow - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. hellosanta/wow ActiveDrupal-library[Utility & Helpers](/categories/utility) hellosanta/wow ============== wowjs for drupal8 animations library 09JavaScript Since Jan 30Pushed 7y ago1 watchersCompare [ Source](https://github.com/cobenash/WOW)[ Packagist](https://packagist.org/packages/hellosanta/wow)[ RSS](/packages/hellosanta-wow/feed)WikiDiscussions master Synced 4d ago READMEChangelogDependenciesVersions (1)Used By (0) WOW.js [![Build Status](https://camo.githubusercontent.com/5e4558866c297eb0bfc3b643ab5b94a04ff4d5f6887bd4148f6e8d5ff3039307/68747470733a2f2f7365637572652e7472617669732d63692e6f72672f6d61747468696575612f574f572e7376673f6272616e63683d6d6173746572)](http://travis-ci.org/matthieua/WOW) ========================================================================================================================================================================================================================================================================================== [](#wowjs-) Reveal CSS animation as you scroll down a page. By default, you can use it to trigger [animate.css](https://github.com/daneden/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](#advanced-usage) Follow [@mattdelac\_](//twitter.com/mattdelac_) for updates as WOW evolves. ### [LIVE DEMO ➫](http://mynameismatthieu.com/WOW/) [](#live-demo-) Live examples ------------- [](#live-examples) - [MaterialUp](http://www.materialup.com) - [Fliplingo](https://www.fliplingo.com) - [Streamline Icons](http://www.streamlineicons.com) - [Microsoft Stories](http://www.microsoft.com/en-us/news/stories/garage/) Version ------- [](#version) 1.1.3 License ------- [](#license) ### Commercial 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](http://www.uplabs.com/posts/wow-js-commercial?utm_source=wow&utm_medium=pricing&utm_campaign=wow) ### Open source license [](#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 ------------- [](#documentation) It just take seconds to install and use WOW.js! [Read the documentation ➫](http://mynameismatthieu.com/WOW/docs.html) ### Dependencies [](#dependencies) - [animate.css](https://github.com/daneden/animate.css) ### Installation [](#installation) - Bower ``` bower install wowjs ``` - NPM ``` npm install wowjs ``` ### Basic usage [](#basic-usage) In order to hide all elements when they are supposed to be hidden. (Anti Flickering) - CSS .wow { visibility: hidden; } - HTML ``` ``` - JavaScript ``` new WOW().init(); ``` ### Advanced usage [](#advanced-usage) - HTML ``` ``` - 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 [](#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 ---------- [](#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 ----------- [](#bug-tracker) If you find a bug, please report it [here on Github](https://github.com/matthieua/WOW/issues)! Developer --------- [](#developer) Developed by Matt Delac, [delac.io](https://www.delac.io/) - [@mattdelac](//twitter.com/mattdelac_) - [Github Profile](//github.com/matthieua) Contributors ------------ [](#contributors) Thanks to everyone who has contributed to the project so far: - Attila Oláh - [@attilaolah](//twitter.com/attilaolah) - [Github Profile](//github.com/attilaolah) - [and many others](//github.com/matthieua/WOW/graphs/contributors) Initiated and designed by [Vincent Le Moign](//www.webalys.com/), [@webalys](//twitter.com/webalys) ### Health Score 20 — LowBetter than 14% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community19 Small or concentrated contributor base Maturity38 Early-stage or recently created project Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/61d645797f8a01d1d7579ab4fd29917f10cd68a4249eb88df54345add9501a2f?d=identicon)[cobenash](/maintainers/cobenash) --- Top Contributors [![attilaolah](https://avatars.githubusercontent.com/u/196617?v=4)](https://github.com/attilaolah "attilaolah (148 commits)")[![mattdelacdev](https://avatars.githubusercontent.com/u/234575?v=4)](https://github.com/mattdelacdev "mattdelacdev (120 commits)")[![webalys](https://avatars.githubusercontent.com/u/703545?v=4)](https://github.com/webalys "webalys (7 commits)")[![daynin](https://avatars.githubusercontent.com/u/825219?v=4)](https://github.com/daynin "daynin (6 commits)")[![joshmatz](https://avatars.githubusercontent.com/u/629120?v=4)](https://github.com/joshmatz "joshmatz (4 commits)")[![mdeboer](https://avatars.githubusercontent.com/u/1171956?v=4)](https://github.com/mdeboer "mdeboer (4 commits)")[![graingert](https://avatars.githubusercontent.com/u/413772?v=4)](https://github.com/graingert "graingert (1 commits)")[![JPAntonisse](https://avatars.githubusercontent.com/u/3437215?v=4)](https://github.com/JPAntonisse "JPAntonisse (1 commits)")[![4aficiona2](https://avatars.githubusercontent.com/u/27226?v=4)](https://github.com/4aficiona2 "4aficiona2 (1 commits)")[![KyleNeedham](https://avatars.githubusercontent.com/u/4059001?v=4)](https://github.com/KyleNeedham "KyleNeedham (1 commits)")[![MoOx](https://avatars.githubusercontent.com/u/157534?v=4)](https://github.com/MoOx "MoOx (1 commits)")[![PeterDaveHello](https://avatars.githubusercontent.com/u/3691490?v=4)](https://github.com/PeterDaveHello "PeterDaveHello (1 commits)")[![phillipalexander](https://avatars.githubusercontent.com/u/1577682?v=4)](https://github.com/phillipalexander "phillipalexander (1 commits)")[![psorensen](https://avatars.githubusercontent.com/u/6152801?v=4)](https://github.com/psorensen "psorensen (1 commits)")[![tagrendy](https://avatars.githubusercontent.com/u/3211029?v=4)](https://github.com/tagrendy "tagrendy (1 commits)")[![taylorstine](https://avatars.githubusercontent.com/u/4440753?v=4)](https://github.com/taylorstine "taylorstine (1 commits)")[![tomasdev](https://avatars.githubusercontent.com/u/364033?v=4)](https://github.com/tomasdev "tomasdev (1 commits)")[![kkirsche](https://avatars.githubusercontent.com/u/947110?v=4)](https://github.com/kkirsche "kkirsche (1 commits)")[![apansky](https://avatars.githubusercontent.com/u/4669789?v=4)](https://github.com/apansky "apansky (1 commits)")[![Bouki](https://avatars.githubusercontent.com/u/605402?v=4)](https://github.com/Bouki "Bouki (1 commits)") ### Embed Badge ![Health badge](/badges/hellosanta-wow/health.svg) ``` [![Health](https://phpackages.com/badges/hellosanta-wow/health.svg)](https://phpackages.com/packages/hellosanta-wow) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)