how to call the new ui-pack animations in v2?
See original GitHub issueHey 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
Issue Analytics
- State:
- Created 5 years ago
- Comments:21
Leaving open as this question needs answering until the documentation catches up 😉
@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 🙂