Preface
I've found anime.js, which not only has far better documentation than Velocity.js, but also has sequencing out of the box, and just works. I am moving to that library, but I'll keep this up in case someone can come through with an explanation as to why this isn't working for me.
Original
I keep hitting issues trying to get Velocity.js and Velocity UI to work. I'm just using a vanilla jQuery environment, no node, no angular, nothing complicated.
The documentation for Velocity is so fragmented that I've found three or four processes for calling the sequence feature in Velocity UI, but none of them work.
I load jQuery, then Velocity, then Velocity UI, and I can console log objects specific to each one to confirm they've loaded, and are in order.
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"
rel="preload">
</script>
<!-- Scripts -->
<script src="./inc/scripts/app/lib/velocity.min.js"></script>
<script src="./inc/scripts/app/lib/velocity.ui.min.js"></script>
The following is the only process that doesn't throw an error, but it literally does nothing...
$div = document.getElementsByTagName('div');
$.Velocity.Sequences.hover = function (element, options) {
var duration = options.duration || 750;
$.Velocity.animate(element,
{
top: "-=10px",
}, {
/* Delay is relative to user-adjustable duration. */
delay: duration * 0.033,
duration: duration,
loop: 3,
easing: "easeInOutSine"
});
};
$div.velocity("hover");
It does nothing at all. The objects are there, the 'hover' function exists within the Velocity.Sequences object. But I can't seem to make it work.
Am I doing this wrong? I tried doing it with $.Velocity AND Velocity, trying to bypass jQuery, so I'm pretty sure it's not a jquery compatibility issue.
Is Velocity just unmaintained?
If it's the latter, is there a new library that's stepped up to replace it? I tried transit, and it works, but I was really interested in Velocity UI's sequence feature.
Edit
I was asked to include a snippet of the non-working code. The following uses code from css tricks, which was linked to within the Velocity UI documentation, and is the only method of working with sequences I've found that doesn't throw an error.
Here is the code targeting a node list...
$div = document.getElementsByTagName('div');
$.Velocity.Sequences.hover = function(element, options) {
var duration = options.duration || 750;
$.Velocity.animate(element, {
translateY: "-=10px",
}, {
/* Delay is relative to user-adjustable duration. */
delay: duration * 0.033,
duration: duration,
loop: 3,
easing: "easeInOutSine"
});
};
$div.velocity("hover");#box {
width: 120px;
height: 120px;
background-color: silver;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.ui.min.js"></script>
</head>
<body>
<div id="box"></div>
</body>Here is a snippet targeting a jQuery object $('div')
$.Velocity.Sequences.hover = function(element, options) {
var duration = options.duration || 750;
$.Velocity.animate(element, {
translateY: "-=10px",
}, {
/* Delay is relative to user-adjustable duration. */
delay: duration * 0.033,
duration: duration,
loop: 3,
easing: "easeInOutSine"
});
};
$('div').velocity('hover');#box {
width: 120px;
height: 120px;
background-color: silver;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/velocity.ui.min.js"></script>
</head>
<body>
<div id='box'></div>
</body>
</html>and a snippet targeting the jQuery object $('#box')...
$.Velocity.Sequences.hover = function(element, options) {
var duration = options.duration || 750;
$.Velocity.animate(element, {
translateY: "-=10px",
}, {
/* Delay is relative to user-adjustable duration. */
delay: duration * 0.033,
duration: duration,
loop: 3,
easing: "easeInOutSine"
});
};
$('#box').velocity('hover');#box {
width: 120px;
height: 120px;
background-color: silver;
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.ui.min.js"></script>
</head>
<body>
<div id='box'></div>
</body>
</html>