Menu icon Foundation
Foundation 6.4: wow.js and Animate.css

Hello,

I need help pretty URGENTLY with this.

Would it be possible for someone to outline the steps required to get wow.js and Animate.css to work correctly and create on-scroll animations in a ZURB Template Project?

What I did was:

1. npm install wowjs --save - wow.js installed successfully. A dependency was added to the package.json file and a wowjs folder was added to the node_modules folder. Animate.css also installed successfully. An animate.css folder was added to the node_modules folder, however, a dependency was not added to the package.json (I don't know if this is an issue or not);

2. I added a class of "wow fadeInUp" to the HTML element I wanted to animate; and

3. I added "new WOW.init();" to app.js.

Nothing happened, and no errors were thrown.

I then added "import WOW from 'wowjs';" to app.js but got the following error, which caused nothing to display on the screen:

I then Googled the issue and was told to add "require('imports?this=>window!js/wow.js');" to app.js, which then gave me this error:

I then assumed that changing "js/wow.js" to "node_modules/wowjs" (I also tried "node_modules/wowjs/dist/wow.js") would resolve the error, but I got the same again.

At this point, I don't know what else to try.

Any help on where I'm going wrong would be greatly appreciated.

Thanks,

Matthew

Foundationwebpackwow.jsanimate.css

Hello,

I need help pretty URGENTLY with this.

Would it be possible for someone to outline the steps required to get wow.js and Animate.css to work correctly and create on-scroll animations in a ZURB Template Project?

What I did was:

1. npm install wowjs --save - wow.js installed successfully. A dependency was added to the package.json file and a wowjs folder was added to the node_modules folder. Animate.css also installed successfully. An animate.css folder was added to the node_modules folder, however, a dependency was not added to the package.json (I don't know if this is an issue or not);

2. I added a class of "wow fadeInUp" to the HTML element I wanted to animate; and

3. I added "new WOW.init();" to app.js.

Nothing happened, and no errors were thrown.

I then added "import WOW from 'wowjs';" to app.js but got the following error, which caused nothing to display on the screen:

I then Googled the issue and was told to add "require('imports?this=>window!js/wow.js');" to app.js, which then gave me this error:

I then assumed that changing "js/wow.js" to "node_modules/wowjs" (I also tried "node_modules/wowjs/dist/wow.js") would resolve the error, but I got the same again.

At this point, I don't know what else to try.

Any help on where I'm going wrong would be greatly appreciated.

Thanks,

Matthew

Rafi Benkual about 1 year ago

Did you add this plugin webpack steam to app.js or in the lib folder? 

 

Rafi Benkual about 1 year ago

Couple issues with WOW that cause challenges with webpack, so

remove/delete wow from node modules

 

Here's what I did:

  1. create new file in js folder wow.js
  2. add this to app.js 
    import './wow';
  3. add to app.js 
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();

 

Matthew Meaklim about 1 year ago

Hi Rafi,

Thanks for your replies. I'll hopefully get round to trying your suggestion tomorrow. If it works I'll mark this post as answered.

Thanks,

Matthew

Matthew Meaklim about 1 year ago

Hello,

I have resolved this... sort of...

What I did was:

1. npm uninstall wowjs --save;

2. In default.html I linked to the CDN's of animate.css and wow;

3. In default.html I added

var wow = new WOW();

wow.init();

inside <script> tags; and

4. I added a class of, for example, "wow fadeInUp" to my desired element.

The reason I said I have sort of resolved this is because I was able to achieve the effect I was after, I just didn't use Motion UI to achieve it.

P.S. Adding the JavaScript in app.js doesn't work, or didn't for me anyway.

Thanks,

Matthew

Tomhun about 1 year ago

All the employees can access their work directly from the official portal which is liteblue.usps.gov. Once you have enter into the account with Employee ID and password, move to work database. As a USPS employee your foundations and services are amazing via LiteBlue USPS Official website. Both Human resources and retirement benefits can be accessed using it.