Smooth mousewheel page scrolling plugin

[Shikkediel]

Planning to rewrite the first little semi-plugin I made with jQuery. Having discovered requestAnimationFrame, animate() will only be the fallback method. So performance should become much better.

But before the surgery will take place, I’m trying to get an insight to how momentum scrolling on mobile devices might influence what I’m trying to do. There will be touch support in any case – mouse actions (desktop) should have a similar momentum effect to what happens on mobile, a smooth user action responsive page scroll.

Anyway. I’m imagining the current state of the plugin isn’t very great for mobile. But how bad is it? Does momentum scroll interfere and make it slow or bouncy? Thanks in advance for any feedback.

http://ataredo.com/morphology/lucidscroll/

Haven’t quite found an answer about how to disable default momentum navigation, just how to enable it. So any tips on that are welcome too.

[Shikkediel]

A side note but I found this very interesting – JavaScript animation beating CSS when it comes to performance :

https://www.youtube.com/watch?feature=player_embedded&v=1ZWugkJV5Ks

Not something to be generally expected.

[Shikkediel]

This in any way accurate? Doesn’t seem too shabby there as is :

Site on iPhone5 emulation

Never mind the unresponsive layout though.

[Shikkediel]

Working on the next version of the aforementioned smooth page scroll plugin. Gave it a low impact requestAnimationFrame default functionality, with jQuery animate only as a fallback :

http://codepen.io/Shikkediel/pen/GJRbOV?editors=001

I would very much like to make this work cross browser. Any feedback on how it’s behaving on Apple mobile merchandise is enormously welcome. I suspect momentum scrolling might be interfering from it being smooth but I cannot test that myself unfortunately.

[Beverleyh]

iPhone 5

I get a pane that scrolls down 10(ish) bats in the zippy momentum scrolling way.

Let me know if that’s what you expect or if there should be any controls visible – I don’t see anything, and there is no action other than the manually scrolling frame.

I’m not able to get at a PC to compare at the moment but I hope the above feedback helps.

[Shikkediel]

Thanks for the reply. I had long post in return that got swallowed by the forum. No script in it or nothing.

:-(

If you would get back to me after checking on desktop that would be great. I’m not sure if the script is just not working on mobile or that the opposite it the case – I’m trying to create something similar to momentum scrolling…

offending statement was here apparently

I guess the larger question is if the mousewheel script defaults to scroll on mobile at all. Hard to figure that out in theory, I may really need to get my hands on a device like that.

Thanks in advance in any case!

[Shikkediel]

Missing text from previous post :

One way to easily check would be to change the animation method near the top to one that’s quirky enough to easily make a distinction.

I guess the one I suggested, ending with OutBack has the wrong letter combination with ease in front of it.

Edit – if I check on the Chrome emulator, I would suspect any mousewheel turn is ignored and normal momentum scrolling is in place since that’s triggered by touchmove. I read a keyboard touchpad on the other hand does trigger mousewheel.

[Shikkediel]

I think the coin finally dropped – even though mousewheel defaults to scroll, it is of course not triggered on a mobile device that doesn’t have a touchpad. Which is fine because it won’t interfere with momentum scrolling then (I’m oblivious about iPad controls though).

Works quite nicely on desktop in any case. I’m becoming a big fan of requestAnimationFrame and it’s super smooth animations.

Edit – works on Codepen but apparently not on the embedded version here since I made it into a proper chainable plugin yesterday…

[Shikkediel]

There seems to be a setup where momentum scrolling and mousewheel interact after all – on a Mac trackpad. I think it’s the only case where the script might be buggy. But that’s okay, I’ll tweak later.

Just wanted to link to the page I’ve been rewriting (don’t check the source too much yet or judge the layout, I wrote it without knowing much about markup or code optimisation back then). All the characteristics can be tested to create your own custom easing curve :

http://ataredo.com/morphology/lucidtest/

B-)

Reality has caught up with the title of the topic… @Paulie_D (or another mod), would you be so kind to change it to “Smooth mousewheel page scrolling plugin”?

[Shikkediel]

Just a general tip for whomever it may be of interest to – took me a day to figure out why fixed positoned elements were so detrimental to the frame rate on webkit browsers when using requestAnimationFrame. With FF and IE the rate was the expected 60 fps on the test page in the previous post (see data tab) but on webkit browsers it dropped to only about 35! Not great for smooth animation. Checking dev tools, it appeared to come from long repainting times.

Anyway, this page had a great solution – setting backface-visibility: hidden on the fixed elements. This will stop them from getting repainted. Removing it on #theme (the grey background) will show the refresh rate suddenly drop with about a third to even only half…

Might be worth to always use since regular scrolling is plugged into the display rate as well (but I’ll definitely experiment with that too)!

[Shikkediel]

Put some serious effort is getting this to work well in a variety of circumstances. Also been making demos and writing documentation on the page link in the first post. Much more to follow but I think it’s pretty neat so far. All the fruit is randomised on each page load, lol.

The whole mousewheel-mobile story apparently isn’t quite finished yet :

https://css-tricks.com/forums/topic/triggering-a-wheel-event-on-mobile/

That might lead to an interesting extension for mobile. B-)

Using $.ajax for the first time on that page by the way. Good stuff.

[Shikkediel]

If I may impose again, @Beverleyh, did you use a two-finger navigation before? Looks like a single touch triggers momentum scrolling while the pinch gesture generates a mousewheel event.

But any feedback on this from the example page in the first post would be very welcome. If it triggers mousewheel, I’m curious how many (maybe I could temporarily log a counter)…

[Shikkediel]

Okay, thanks for the reply. All credit there to the counsel of geniuses (Apple) though because that would be the native momentum thingy. But at least I have some more insight into that now. Don’t think I want to interfere with it although that wouldn’t be too complicated.

If anyone is so inclined to throw almost half a hand at scrolling the page and maybe one of the smaller boxes, that would be great. I’ll try to check myself as soon as I can get my hands on a touch device. Google’s emulator isn’t not of much use here.

[Shikkediel]

Having some fun with the easing equations. B-)
Just informative… but any touch device feedback is still appreciated.

From a mechanical engineering point of view they’re a lot more interesting than the abstract little functions they appear to be. They’re basically positional curves :

http://jqueryui.com/resources/demos/effect/easing.html

Which means that if you throw some calculus at them, you won’t just be able to determine the position of the DOM element but also the speed (and acceleration) :

https://www.youtube.com/watch?v=9fySPSyqvyY

I couldn’t even find the full original equations for linear and swing (which you gotta rename if you extend easing so it’s curve here), the jQuery source has a indirect approach so posting them might save someone (that’s also googling) the trouble at some point :

var easing = {

  linear: function(x, t, b, c, d) {c*t/d+b},
  curve: function(x, t, b, c, d) {return 0.5-c*Math.cos(t/d*Math.PI)/2}

}

And I had a crack at getting the derivatives of a couple :

var speed = {

  linear: function(t, c, d) {return c/d},
  curve: function(t, c, d) {return c*Math.PI/d*Math.sin(t/d*Math.PI)/2}

}

• t current time (or position) of the tween. This can be seconds or frames, steps, seconds, ms, whatever – as long as the unit is the same as is used for the total time.
• b beginning value of the property.
• c change between the beginning and destination value of the property.
• d total time of the tween.

http://upshots.org/actionscript/jsas-understanding-easing

Why (on earth), you might ask? Apart from plain nerdiness, it could be interesting to create a ‘dynamic’ easing curve that smoothens out sudden velocity changes that additional mousewheel turns can cause.

Already using them to get some maximum speeds on the test page. :-)

[Shikkediel]

Okay, swing (or curve here) wasn’t quite correct. It should be :

0.5*c-c*Math.cos(t/d*Math.PI)/2+b

Which confirms a long suspected fact… it’s the same as easeInOutSine :

-c/2*(Math.cos(t/d*Math.PI)-1)+b

Just written a tad differently.

[Author]

Posts