I have a question about using velocity.js for hovering on elements.
Currently I use CSS to zoom in/out and animate elements when users hover on them, and I use velocity.js to animate them initially on page load.
So my question is; how should I be using velocity.js to replace these CSS animations/should I at all? Currently I use velocity on page load as I'm sure that's what it was designed for, but was it also intended for use with things like hover?
With jQuery I'm guessing this is how a hover effect would be applied:
$("element").hover(function(){
//Do something
});
Is this how it's done with something like velocity too? You just add the velocity code in the jQuery hover function?
Thanks for any clarification; I thought this was an appropriate place to post this with a decent number of questions on it already existing.
There are two solutions for this. The first is pretty straightforward, but it will produce unwanted effects if a user quickly enters and exits the element. Essentially, the animation will looping for far too long; however, it works just fine if the user is casually hovering over the element.
Here's a demo with that solution.
The other solution is more robust and accounts for unusually rapid 'hover toggling' from the user. If the user rapidly hovers in and out of the element, this solution just stops and reverses the animation. This is what I use on any hover states with velocity.
You can view that solution here.
Here's the javascript code using JQuery
You can also create onhover to animate things and reverse on mouseout.
This works for me for hover effects with Velocity
You can use velocity for hover effects. Here is a codepen with 4 different effects on hover: adds a boxshadow, shows a caption and animates the text and also scales the image hovered,all using velocity.js You can see from the code that, for they example, I am using mouseenter and mouseleave, not hover. Hope this helps!
Velocity.js Hover Codepen
html
CSS
Javascript