how to call the new ui-pack animations in v2?

Hey there, so I’m sorry if I am not reading this properly but I’m just really confused.

I’ve read in many places that the UI-Pack functionalities don’t work for V2 yet… but I’m super confused because on the main readme.md you have this

https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.ui.min.js

This is a 2.0.2 version of the UI-Pack… is this being auto-generated in error or something? I just figure if you are making available a v2 version of the UI-Pack here then maybe that means it’s working now?

But I can’t figure out how to call it.

previously I was simply doing $('.v--modal').velocity('transition.swoopIn');

And this worked with version 1.5.1

now I’m using Velocity with Vuejs so it seems I have to call it differently.

so I’m doing it like this

import velocity from 'velocity-animate';

and then in my code

this works

velocity($('.v--modal'), { opacity: 1 }, { duration: 300 });

this doesn’t work anymore, since I’m not including the js file directly and importing in vue instead

$('.v--modal').velocity('transition.swoopIn');

and this also doesn’t work

velocity($('.v--modal'), 'transition.swoopIn');

I also tried rebuilding the swoopIn animation with the new syntax

      velocity(
        $('.v--modal'),
        {
          opacity: [1, 0],
          transform: "translateX(25px) scale(1.2)",
          transformOriginX: ['100%', '50%'],
          transformOriginY: ['100%', '100%'],
          scaleX: [1, 0],
          scaleY: [1, 0],
          translateX: [0, -700],
          translateZ: 0,
        },
        { duration: 850 },
      );

but this also doesn’t work.

BTW I am importing the velocity-animate (which I installed with NPM @beta)

But I am manually including the https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.2/velocity.ui.min.js because there doesn’t seem to be a npm package for that

I basically just really want to use the old animations in V2… specifically the swoopIn animation… and I don’t mind rewriting it but would really love an example of how to write it using the new syntax because I’m just lost with trying to port over the old way of doing things to the new way

And like I mentioned, just really confused about whether the UI animations are working or not yet… because I can see from your commit messages that you did very recently pull them in… but I can’t find any example of how to actually make calls to them… despite the V2 of the UI package being available on your readme

apologies for the annoyance… really like your package and looking forward to using V2 without issues

[Rycochet]

Leaving open as this question needs answering until the documentation catches up 😉

[brunoamaral]

@Rycochet thank you, that was it. I am using the new version and didn’t know I had to attach import 'velocity-animate/velocity.ui.min.js'; to have the UI pack. Thank you 🙂