velocity-animate not working

[ajainvivek]

I have installed jquery, velocity animate and its respective typings.

Editor doesn't show up any lint errors but when I run the application velocity is undefined.

$('.main').velocity({ opacity: 1 }, { duration: 1000 });

I am not sure what I am doing wrong.

Any help appreciated.

[arlowhite]

@ajainvivek Are you using MaterializeCSS by any chance?

Even if it's another library this may help...

I have jQuery and plugins loaded as globals:
angular-cli.json

      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/velocity-animate/velocity.js",
        "../node_modules/hammerjs/hammer.js",
        "../node_modules/materialize-css/dist/js/materialize.js"
      ],

MaterializeCSS was checking for the jQuery global but neglected to look for window.jQuery so it would fallback to require('jquery'), which I think loaded a 2nd instance.
I'm not positive, but I think zone.js or WebPack hides/removes global variables. I noticed other libraries checked the window object.

So I fixed their jQuery detection code here:
https://github.com/arlowhite/materialize/blob/no-jquery/js/initial.js
Also, I removed the built-in velocity and HammerJS because I wanted newer versions.
https://github.com/arlowhite/materialize/tree/no-jquery
(there are a couple changes to autocomplete in that branch, but those commits shouldn't impact your code)

[ajainvivek]

@arlowhite Thanks.

I was able to get it working as you suggested.

[wgbn]

@arlowhite Help me, please, I could not get it to work and I still get 'velocity is not a function'

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}