4

I have this animation that work just fine in jquery, except it's pretty lagy. onclick, it scroll down smoothly to the wanted element. 

$('#aboutMenu').click(function(){
$('html, body').animate({
    scrollTop: $( $(this).attr('href') ).offset().top -200
}, 900);
return false;

According to this webpage: http://julian.com/research/velocity/

I should be able to simply "Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile."

Well I do it, but then when I click, nothing happen anymore.

What am I missing ?

Oli
  • 53
  • 5
  • 1
    Velocity only works on CSS animateable properties, not `scrollTop` which changes a property of the element that is not CSS stylable. – Gone Coding Jan 21 '16 at 13:06
  • https://github.com/julianshapiro/velocity/issues/26 – A. Wolff Jan 21 '16 at 13:10
  • 1
    @A.Wolff: Good link, have been looking for a definitive reference – Gone Coding Jan 21 '16 at 13:11
  • 1
    @TrueBlueAussie There is the scroll property/argument that should be used as pointed it in link: http://julian.com/research/velocity/#scroll And to be very complete, in modern browser (currently only FF), [scrollIntoVIew()](https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView) with animation could be used but not sure it would fit OP needs and anyway currently not really useful – A. Wolff Jan 21 '16 at 13:16
  • EDIT: OP wants a 'gap'(?!) of 200px, so not sure `scrollIntoView()` could be used in the futur for that, and even not sure how to set it using `$.fn.velocity('scroll',....)` method – A. Wolff Jan 21 '16 at 13:23

1 Answers1

2

Velocity only works on CSS animateable properties, not scrollTop which changes a property of the element that is not CSS stylable.

You need to only use velocity on CSS styled properties (margins, width etc). Leave the old animate code in place for any non-css property animation.

Update (thanks to A.Wolff):

Velocity does support scrollTop but using a scroll command they added:

$element.velocity("scroll", { duration: 1500, easing: "spring" })

According to the link @A. Wolff provided https://github.com/julianshapiro/velocity/issues/26

We'll start with the basics: Velocity doesn't support animating scrollTop property like $.animate() does. (It's not a real property -- jQuery shimmed it.)

So the only reason scrollTop works in animate either is because they added it into jQuery specifically. They did the same thing using scroll for velocity.

P.S. We use velocity for our transitions and, for mobile especially, it is much smoother.

Gone Coding
  • 88,305
  • 23
  • 172
  • 188
  • Hey, thank you for your answer. It worked with $element.velocity("scroll", { duration: 1500, easing: "spring" }) But it was still lagy. I've realized that it was coming from jquery-ui.min.js which I was using for the navBar to findIn with on scrollDown. This is what was causing the lag. Hence, I'm still using jquery for the scrollDown animation as it work fine now. – Oli Jan 21 '16 at 15:19