About Stacks Guru
Stacks Guru is born from the need to search the vast number of videos out there on stacks built for Stacks Pro and the Stacks 5 plugin for Rapidweaver.
We have scraped over 500 videos to get the transcripts for each in order to make the spoken word searchable.
Please use this free tool to help you learn and discover the awesome power that Stacks and the stacks made for Stacks have to offer.
Stacks Guru
Video Reference
Leave a Tip!
Every little bit helps to keep this going. I'll be doing my very best to keep up with the likes of Joe when it comes all the videos he posts!
ScrollMate2 - Why is it so smooth?
A brief look under the hood of the ScrollMate 2 stack and why it is so kind to your browser. Low impact efficient operation makes for a silky smooth user experience on desktop and touch devices.A brief look under the hood of the ScrollMate 2 stack and why it is so kind to your browser. Low impact efficient operation makes for a silky smooth user experience on desktop and touch devices.
Transcript
0:06 So here we are in the downloadable\ndemo project here which I've just
0:12 previewed in Safari on the right hand\nside of the screen you can see the code
0:16 for the page - don't worry about the\ncode all we're going to look at is the
0:22 translate3d line here. Now, that's the\nposition of the watch which
0:28 is in the scroll mate so you can see\nthat when we move the page up and down
0:34 that has now gone to minus 100% on the X\nAnd back to 0 again...
0:40 into its normal position the point being\nis that you'll notice that even though
0:44 this comes in nice and smoothly and\nwe've got easing applied to it
0:48 the JavaScript that's controlling its\nposition is very quick it's doing a
0:54 couple of movements if we go very slowly\nover that range of 1% you can just see
0:59 those values moving and that's because\nScrollMate is using CSS for all its
1:05 easing and smooth positioning. The\nJavaScript part is only ever doing a
1:12 tiny amount and that it's the JavaScript\npart that takes up a lot of the
1:16 processor in the browser and starts to\nmake pages go janky. When the browser can
1:21 use its own CSS processing to move\nthings and and ease things it's a lot
1:29 smoother so the bottom of this watch is moving in\nbetween 0% and 1% of the bottom of
1:36 the screen. Let's have another look at\nthe next example now this one comes in
1:41 the same but it's got a nested scroll\nmate arrangement so the second scroll
1:46 mate then at about 8% of the page so\nabout here it then starts sliding it
1:52 left proportionally so it comes in like\nthat that's a very small range with some
2:00 easing so it's a quick trigger and\nthen a proportional slide okay so let's
2:07 look at the div for that one and see\nwhat's happening. So we can see just like
2:13 the\nfirst one it will come in and then this
2:19 is this is the outer ScrollMate that you\ncan see if we look at the inner one you
2:24 will see it'll come in so there's our\n100% - you see just there
2:29 like the last one did goes to 0%\npercent so then it's it appeared;
2:34 0% percent back in the place it belongs on\nthe page and then it's animated all the
2:39 way up the page so you can see as I\nscroll this x position changes with
2:44 scroll but again we're not doing the\neasing with JavaScript we are
2:51 positioning it where we want it so\nthat's moving with the scroll but you
2:54 can see it carries on moving after all\nthe the fancy eased positioning, all the
3:01 smooth slide is done with CSS\nand you'll also see then that when this
3:06 goes off the top of the screen there you\ngo it doesn't do anything it doesn't
3:12 keep writing 100% to it -\ndoesn't position anything that's not on
3:16 the screen and likewise when we when\nit comes back off the bottom it's not
3:20 and then nothing happens so that's the\nreason that scroll makes nice and
3:25 efficient and you can have lots of these\neffects on your screen without causing
3:31 the browser to go janky and even without\ncausing mobile browsers to go janky as well."}]
0:12 previewed in Safari on the right hand\nside of the screen you can see the code
0:16 for the page - don't worry about the\ncode all we're going to look at is the
0:22 translate3d line here. Now, that's the\nposition of the watch which
0:28 is in the scroll mate so you can see\nthat when we move the page up and down
0:34 that has now gone to minus 100% on the X\nAnd back to 0 again...
0:40 into its normal position the point being\nis that you'll notice that even though
0:44 this comes in nice and smoothly and\nwe've got easing applied to it
0:48 the JavaScript that's controlling its\nposition is very quick it's doing a
0:54 couple of movements if we go very slowly\nover that range of 1% you can just see
0:59 those values moving and that's because\nScrollMate is using CSS for all its
1:05 easing and smooth positioning. The\nJavaScript part is only ever doing a
1:12 tiny amount and that it's the JavaScript\npart that takes up a lot of the
1:16 processor in the browser and starts to\nmake pages go janky. When the browser can
1:21 use its own CSS processing to move\nthings and and ease things it's a lot
1:29 smoother so the bottom of this watch is moving in\nbetween 0% and 1% of the bottom of
1:36 the screen. Let's have another look at\nthe next example now this one comes in
1:41 the same but it's got a nested scroll\nmate arrangement so the second scroll
1:46 mate then at about 8% of the page so\nabout here it then starts sliding it
1:52 left proportionally so it comes in like\nthat that's a very small range with some
2:00 easing so it's a quick trigger and\nthen a proportional slide okay so let's
2:07 look at the div for that one and see\nwhat's happening. So we can see just like
2:13 the\nfirst one it will come in and then this
2:19 is this is the outer ScrollMate that you\ncan see if we look at the inner one you
2:24 will see it'll come in so there's our\n100% - you see just there
2:29 like the last one did goes to 0%\npercent so then it's it appeared;
2:34 0% percent back in the place it belongs on\nthe page and then it's animated all the
2:39 way up the page so you can see as I\nscroll this x position changes with
2:44 scroll but again we're not doing the\neasing with JavaScript we are
2:51 positioning it where we want it so\nthat's moving with the scroll but you
2:54 can see it carries on moving after all\nthe the fancy eased positioning, all the
3:01 smooth slide is done with CSS\nand you'll also see then that when this
3:06 goes off the top of the screen there you\ngo it doesn't do anything it doesn't
3:12 keep writing 100% to it -\ndoesn't position anything that's not on
3:16 the screen and likewise when we when\nit comes back off the bottom it's not
3:20 and then nothing happens so that's the\nreason that scroll makes nice and
3:25 efficient and you can have lots of these\neffects on your screen without causing
3:31 the browser to go janky and even without\ncausing mobile browsers to go janky as well."}]
Search the page
0
{name}
{rating}
{comment}
