Jump to content

smooth scolling ... the journey ...


chef

Recommended Posts

Emby web app will always choose performance first. html5 playback, lazy loading page items and scrolling are all examples of how 'quick and snappy' emby can be.

 

There are so many different devices to cater to; be it mobile, slow desktops, three or four major internet browsers.. (one of which wants to go it's own route and not follow ECMA guidelines... Yeah I'm looking at you IE/EDGE!)

 

These snappy responses are purposefully hardcoded into the UI. Transitions will make timing functions ease, and only last three milliseconds, again, this makes sense.

Users want their UI to snappy, quick and content right away.

 

When I look at other UI's like Netflix, Kodi and some others, the scrolling seems ridiculously smooth. Looking at several projects on places like Codepen I can see really elegant smooth horizontal scrolling.

 

I decided to follow the javascript bread crumbs and see where and how to slow down the scrolling and smooth it out, mostly ScrollX - horizontal scrolling.

 

 

 

So how does horizontal scrolling work exactly? WCW has the answer:

 

https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

 

Apparently we want to add a style properties: "overflow: auto" and "white-space: nowrap" to an element.

 

Okay, that's what we look for in the browsers dev tools for the web app! "white-space: nowrap"

 

5db311f26ddfc_exampleNoWrap.png

 

 

OH! There it is! In the itemContainer. Okay so emby's web app is scrolling the itemContainer left and right! Right?!?

 

Well, not exactly.

 

Better look at the javascript markup to see what's up.

 

 

Oh man! the emby scroller is a proto-type element and it has a whole bunch of mark up.

 

What happens when you press the "left" direction scroll button, or the "right" directional scroll button?

 

This (code snippet):

            parent = dom.parentWithAttribute(this, "is", "emby-scroller"),
            direction = this.getAttribute("data-direction"),
            
Right! So look at the button that was clicked and get the data attribute which tells us the direction. Right Button is 'right', Left Button is 'left. Simple!

 

 

then it fills the scrollSize… hmmm.... okay that code creates a variable for the scroller called "elem".

 

If we have the scroller element we can add some transition properties to it and maybe that will smooth our scrolling. Let's make the transition ridiculously long and see what happens!

scrollSize = function(elem) {
                elem.style.transition = "13s all ease-in-out";
                
nothing!

 

moving on!

 

at the bottom of this function, after calculating the new position of our slider this is called:

parent.scrollToPosition(newPos, !1);
Okay! 'parent' is still the 'emby-scroller', and there seems to be a proto-type function attached to it called 'scrollToPosition' which takes the calculated new positioning of the scroller and Boolean value of sorts!

 

Need to find '.scrollToPosition' prototype function initialization...

 

Note: this is turning into a Mr. RObot ep_1sod_e :huh:

 

 

Found it! Inside 'emby-scroller.js'... imagine that!

function _scrollToPosition(pos, immediate) {
                this.scroller && this.scroller.slideTo(pos, immediate)
    }
'_scrollToPosition' is the same as 'scrollToPosition' it's linked further down the code when the prototype is created.

 

And it looks like the Boolean value that was passed back inside the 'left/right' button click corresponds to a parameter called immediate. Cool!

 

But, look at that! 'this.scroller' has a function attached called 'slideTo'...

 

I can't find the function 'sideTo' and this is currently where things stop.

 

 

I attempted to utilize TweenMax Green Sock animations on the scroller. It went very, very smoothly, however what I have seen is that without the call to 'slideTo' on the scroller the 'itemsContainer' will elegantly scroll across the screen, not the items inside... Quite funny to see your entire movie list scroll right off the screen.

 

 

From what I can suspect, the 'slideTo' function calculates the width of the itemsContainer while also translateX of the items inside it.

 

Just something I did when I was board at 1:00am!

Edited by chef
  • Like 1
Link to comment
Share on other sites

 

 

I followed the scroller object instances all the way back to the swiper.js libraries in Emby.

 

Although swiper has many different configuration options I wasn't able to find exactly where emby creates its own instances of the swiper.js objects.

 

If I could then it would be possible to enable coverflow, and some other types of scrollers. Instead what I was able to do is slow down the scroll calculations when scrolling horizontally, and I added some subtle transitions inside an intersection Observer to animate the cards in and lazy load vanilla tilt libraries.

 

Looks like this:

 

 

Oh classy

Edited by chef
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...