Issue using Velocity.js UI animations without jquery

Question

So I have a project in which I can't use jquery. I must use native js. Having used Velocity.js lately I wanted to use it again for this project. However in the doc and in this post in particular I couldn't find any advices in order to make Velocity UI animations (like transition.slideLeftIn for instance) work.

In the doc I did find an exemple but it's not about UI already made animations.

Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 });

After that I tried :

Velocity(myElement, { transition.slideLeftIn }, { duration: 1000 });

And

Velocity(myElement, transition.slideLeftIn, { duration: 1000 });

And

myElement.Velocity("transition.bounceLeftIn");

However none of these solutions are working. Any ideas about how I could fix this ?

Thanks in advance :)

Answer 1

Everything you tried is either not valid JS or not following Velocity's API.

The first line you tried will raise a syntax error.

The second will probably raise a reference/value error. More specifically, transition.slideLeftIn should be a string, as in 'transition.slideLeftIn'.

The third will obviously raise another reference error since Velocity is set on the window object and does not extend Element.

So the right syntax will be:

Velocity(myElement, 'transition.slideLeftIn', { duration: 1000 });

Answer 2

Just thought I'd share another Answer for anyone who stumbles here through Google.

I also was having issues using Velocity JS without jQuery. However, my problem was related to not using the correct source code, even though I downloaded it from here

You should be able to find the correct code on the github page: Latest Here

Here's a simple example using the API also:

Velocity(myElem, {boxShadowSpread: "5em"}, {easing: "easeIn", duration: 500});