CODEWITHSUNDEEP
javascriptjqueryvelocity.js
Zak
Zak

Reputation: 2058

Translate not working in Velocity.js

I'm having some trouble animating an element using Velocity.js. My current code does not work (it's meant to translate the element 100 pixels to the right)...

$("#example").velocity({ translateX: "100px" });

However, interestingly it does work when I change it to the following...

$("#example").velocity({ transform: "translateX(100px)" });

My example seems to be the same as the code given at http://velocityjs.org/#transforms. Is there any obvious reason why this might be happening?

Here's a JSFiddle to test out my problem, https://jsfiddle.net/zwtoxxfL/2/.

Upvotes: 0

Views: 1123

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370729

You're using version 2.0.2 in your fiddle, which looks to not support that sort of syntax. Velocity hasn't updated their docs - their provided working example on codepen uses version 1.5.0, rather than their newest version.

If you want to use the transform shorthand like that, downgrade to a lower version:

$("div").velocity({ translateX: "100px" });
div {
  background: green;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<div></div>

Upvotes: 2

Related Questions