Enhancement: jQuery scrollTo replacement

[dominikwilkowski]

Hi there,

I would love to see a scrollTo replacement that uses CSS3s translate3d for the transition and falls back to Javascripts scroll.

As I understand the current implementation of .velocity("scroll") it will only ever scroll to an element with an option for an offset.

I ran into a view scenarios where I had to scroll a div by a specific amount of pixel, completely independent of any elements within the container. I might be wrong here but this doesn't seem to be possible with velocity currently.

To implement this I would manipulate the translate3d e.g.:

$element
    .css({
        '-webkit-transform': distance,
        '-moz-transform': distance,
        '-o-transform': distance,
        'transform': distance
    });

and so on...

Takers?

[julianshapiro]

First off: I love you for properly formatting the issue title. No one has ever done that (I always modify them). Thanks, @dominikwilkowski!

Second: I don't understand what the significance of your translate3d proposed integration is? I don't understand the relevance or the benefit?

Third: You're correct. What you're asking to do is not currently possible. You can fake it by offsetting using the element's actual dimensional offset position then working with that as a base value, but that'll be ugly.

I will regretfully have to say that your best solution in this case is to just use jQuery's own scrollTop property with $.animate(), e.g. $element.animate({ scrollTop: endValue });.

[dominikwilkowski]

Hey @julianshapiro,

Thanks for the very quick reply and kind words. To your second point: translate3d would move the animation away from Javascript and into hardware accelerated CSS3 making it much smoother and quicker in mobile devices and in HTML5 wrappers like phonepag or trigger.io etc. Javascript will still have to set the value but the animation and all its steps in between will be done by CSS3. This is missing in jquery and I thought might be the point of velocity? (making animations smoother)

I have a very crude codepen here to show what I mean.

[julianshapiro]

To your second point: translate3d would move the animation away from Javascript and into hardware accelerated CSS3 making it much smoother and quicker in mobile devices and in HTML5 wrappers like phonepag or trigger.io etc.

(CSS isn't faster than Velocity. Check the docs for further info.) In this particular case, however, you could artificially force HA by animating translateZ to 0 in your animation.

Regardless, what you're proposing -- you probably realize this -- isn't real scrolling and as such will prevent you from properly scrolling elements (as opposed to the browser window). But what you're proposing is nonetheless very technically interesting! I wouldn't do it, however, as it would entail a lot of work for likely little benefit and also wouldn't work on older versions of IE.

Thank you so much for putting together the CodePen demo!

[dominikwilkowski]

Ah ok thanks. I experienced jerkiness and frequent bumps in jquerys scroll animation of scrollTo and a much better experience with CCS3s translate3d on mobile so I just assumed.

I take your point though. This does not let the user scroll anymore natively and might indeed be an edge case.

Thanks for taking the time.

[julianshapiro]

Totally valid concerns. Velocity's scrolling is super smooth already --- MUCH smoother than jQuery. But, regretfully, custom scrolling isn't supported (yet!) :-D Thanks again, Dominik.