5

I have a simple block that is suppose to move left 200px with translateX. It will move left with position left. I can't seem to move the block with translateX or translateY. CSS values for Transform translate will work. Reason to use translate is the performance compared to position. I commented out the position left with Velocity to give you an idea what I'm trying to achieve.

var button  = document.getElementById('button');
var adiv = document.getElementById('panel');
button.addEventListener('click', function(){
    //Velocity(adiv, { left: '100' }, [ 500, 20 ]);
    Velocity(adiv, {translateX: 200}, [ 500, 20 ]);
})
#panel {
    display: block;
    position: absolute;
    background: #ffffbd;
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
   }

button {
    top: 90%;
    position: relative;
    display: block;
}
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


    <body>
      <div id="topbar"></div>
       <div id="panel">
       </div>
   <button id="button">start</button>
   </body>
nietonfir
  • 4,797
  • 6
  • 31
  • 43
Brad Vanderbush
  • 173
  • 1
  • 13
  • 1
    Ran into the same issue, right now. Unfortunately I haven't found a solution yet, if I do will let you know. I can even combine translateX and opacity and the opacity will animate but the translate is being skipped completely. I'm running Velocity without jquery. –  Feb 24 '18 at 19:52
  • 1
    Figured it out, velocity has been updated to 2.0 and some code has been changed. New docs are up on github. https://github.com/julianshapiro/velocity/wiki –  Feb 24 '18 at 20:21
  • 1
    Also noticed that the CDN is corrupt and not working with transforms. Download the minified version from Github and include that into your project. Then it will work. –  Feb 24 '18 at 21:22
  • @woulter125 outstanding... so I guess if I want to use the CDN link for it to work I got to wait till it gets updated. In the meantime i'll use the min.js version of it. – Brad Vanderbush Feb 26 '18 at 15:57

3 Answers3

4

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately).

Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

If there's no forcefeeding it'll animate from a value of 0.

Rycochet
  • 2,860
  • 1
  • 22
  • 39
  • Indeed it works, it also looks like you need pixels to be used as well. Finally an answer! – Brad Vanderbush Feb 28 '18 at 16:12
  • 1
    Using the single element syntax with V2 and transforms I get an error message `Uncaught TypeError: Cannot read property 'pattern' of undefined` — is there something I'm missing here? `$element.velocity({ transform: "translateX(100%)" });` . Here is a codepen with the example throwing the error: https://codepen.io/poopsplat/pen/wxzWvg – itsmattsoria Jul 18 '18 at 15:58
  • The first time you use `transform` on an element you should use forcefeeding, the "treat it as from 0 if not already specified" bit doesn't seem to be working right now (this is one of the rare cases where it can actually be used correctly when it's working). – Rycochet Jul 18 '18 at 23:00
  • The `transform` property seems to always generate that exception, trying to read the "pattern" property of the tween "sequence", which (the "sequence") is coming up `undefined`. – Pointy Jun 01 '23 at 15:41
0

Velocity seems to be picking up steam with version 3 of VUE coming up. I highly suggest the Velocity 2.0 docs to be a little more updated with information such as:

In Velocity V2 there are no longer any transform shortcuts such as translateX - just use the css transform property properly and it'll work (there are issues in V1 with trying to do that unfortunately). Velocity(adiv, {transform:"translateX(200px)"}, [ 500, 20 ]);

Or reach out to the VUE team as they are still using the Velocity 1.x examples.

Rohan
  • 1
  • 1
-2

Easy example with jQuery:

$('.box').on('click', function() {  
  $(this).velocity({
    transform: ["translateX(100px)", "translateX(0px)"]
  }, {duration: 1000});
});
HU TanKy
  • 19
  • 1
  • 5