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 pared to position. I mented 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="/[email protected]/velocity.min.js"></script>
<script src=".0.0/jquery.min.js"></script>
<body>
<div id="topbar"></div>
<div id="panel">
</div>
<button id="button">start</button>
</body>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 pared to position. I mented 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/npm/[email protected]/velocity.min.js"></script>
<script src="https://ajax.googleapis./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>- 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 bine translateX and opacity and the opacity will animate but the translate is being skipped pletely. I'm running Velocity without jquery. – user2023106 Commented Feb 24, 2018 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. github./julianshapiro/velocity/wiki – user2023106 Commented Feb 24, 2018 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. – user2023106 Commented Feb 24, 2018 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 Commented Feb 26, 2018 at 15:57
3 Answers
Reset to default 4In 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.
Velocity seems to be picking up steam with version 3 of VUE ing 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.
Easy example with jQuery:
$('.box').on('click', function() {
$(this).velocity({
transform: ["translateX(100px)", "translateX(0px)"]
}, {duration: 1000});
});