A pure JS smooth scroll library for a better user experience with all accessibility.
-
Download the
Scriptsfolder and theStylesfolder. -
Attatch the
scroller.jsat the very top of all the attachments. Then attach the other files. -
Only attatch the
_scroller.scssfile in your mainSCSSfile.
If you are not familiar with the
SCSS, then please watch a video on it. It is very easy.
- Add a background color to the
<main>tag to preventChromelagging issue.
Simply follow this step by step guide :)
- Wrap your all contents inside a wrapper and add
.scroller-main-contclass.
<body>
<main class="scroller-main-cont">
<!-- All contents should be here -->
</main>
</body>- You can add a varient class to determine the scroller type. There are four types of scroller.
.scrollerX,.scrollerY,.auto-scrollerXand the default.
<body>
<main class="scroller-main-cont scrollerY">
<!-- All contents should be here -->
</main>
</body>
.scrollerXmakes horizntal scrollbar
.scrollerYmakes Vertical scrollbar
.auto-scrollerXmakes horizntal scroll by vertical scrollbarDefault is simply the regular style.
- You can add horizontal sub-scroller inside the vertical scrollbar which will be automatically scrolled by the parent scroller. For this, parent must have
.scrollerYclass and you have to add.sub-scroller-main-contclass to that wrapper.
<body>
<main class="scroller-main-cont scrollerY">
<!-- Some contents here -->
<div class="sub-scroller-main-cont">
<!-- Some contents should be here -->
</div>
<!-- Some contents there -->
</main>
</body>-
You can make many smooth-scroller wrapper as you want. Simply add
.scroller-main-contclass to all wrapper. -
You can change the animation style, easing function, duration etc. from the css file.
-
You have to add
data-classto select the main container -
There are some options you can add to the
smoothScroller()function giving an object as an argument. You can choose default scrollbar type.
smoothScroller({
customScrollbar: true, // If false, it will be the default scrollbar.
accessMainObjects: false, // If true, it will return all the scroller objects.
});-
You can change the animation style, easing function, duration etc. from the css file.
-
The posibilities are endless. Just play around.
-
You can add external Js file and attach it under the
scroll-based-animator.jsfile. Or if you use internal script, you have to wrap your code byonload()function. -
This animation works based on the position of the point elements. Point element can be anything. You have to select some point elements for the animation.
-
Now make an array of objects. Each object will represent as an animation. Each of them has the property -
pointEl. -
Now you have to add a property -
steps: []. There will be three function in there. Each function represents the different stage of the animation.
steps[0]is the innitial condition. Add style that you want to have before the animation happen.
steps[1]is the animation condition. Add style that you want to have in the animation. It has a parameter that represents the animation percentage.
steps[2]is the last condition. Add style that you want to have after the animation happen.You can animate many element as you wish in these fuctions.
const sbAnimationObjs = [
{
pointEl: pointEl1,
steps: [
() => {
// Here goes the initial style
},
(percentage) => {
// Here gose the animation style
},
() => {
// Here goes the last style
},
],
},
{
pointEl: pointEl2,
steps: [
() => {
myEl1.style.transform = `translateY(0)`;
myEl2.style.height = `10px`;
},
(percentage) => {
myEl1.style.transform = `translateY(${7 * percentage}vw)`;
myEl2.style.height = `${50 * percentage}px`;
},
() => {
myEl1.style.transform = `translateY(7vw)`;
myEl2.style.height = `50px`;
},
],
},
];In this example,
myEl1will havetranslateY(0)before the animation. The animation will start whenpointEl2is entered into the viewport.myEl1will be changed fromtranslateY(0)totranslateY(7vw). And the last value will betranslateY(7vw).
- There are two types of animation. One is the default, another one is the chaining animation. This kind of animation is more advanced animation. To define the type you have to add
type: "complex". Default type istype: "simple".
type: "complex"has two point element.startPointElandfinishPointEl. The chaining animation happen when the first animation'sfinishPointElis the secont animation'sstartPointEl.
const sbAnimationObjs = [
{
type: "complex",
startPointEl: pointEl1,
finishPointEl: pointEl2,
steps: [
() => {
myEl1.style.transform = `rotateZ(0deg)`;
},
(percentage) => {
myEl1.style.transform = `rotateZ(${90 * percentage}deg)`;
},
() => {
myEl1.style.transform = `rotateZ(90deg)`;
},
],
},
{
type: "complex",
startPointEl: pointEl2,
finishPointEl: pointEl3,
steps: [
() => {
myEl1.style.backgroundColor = `rgb(15, 155, 135)`;
},
(percentage) => {
myEl1.style.transform = `rotateZ(${90 - 90 * percentage}deg)`;
},
() => {
myEl1.style.transform = `rotateZ(0deg)`;
},
],
},
];In this example, first animation will happen when the
pointEl1enters into the viewport and the animation will finish when thepointEl2is entered into the viewport.myEl1will animate first time in this renge.After the
pointEl2is entered into the viewport, the second animation will be triggered and it will run before thepointEl3is entered the viewport.For this kind of writing style, you can chain the animation as long as you can.
-
You have to add the scroll direction. If you are using horizontal scroll, you must add
axis: "x"for determine the scrollbar axis. -
You can add
offsetsproperty to set the offset of starting position and ending position. It has two values,offsets: [starting offset, finishing offset]. -
Now pass the
sbAnimationObjsas an argument ofscrollBasedAnimatorfunction.scrollBasedAnimator(sbAnimationObjs). -
It is very easy and responsive if you understand the concept. You can make very complex animation with this. Just play around.
You can use position: sticky. But in some browser like Firefox it only works if that element is a direct child of the wrapper. To solve this problem you can use our stickyAnimator() function.
-
Now you have to define an array of animation object. There will be a property called
pointElwhich will be the target Element. -
You can add any element as the parentElement by
parentEl. -
You can add offset which will work as
top-bottomorleft-rightproperty on aposition: stickyelement. -
Now call the
stickyAnimator()with the array of object as a parameter.
const stkAnimationObjs = [
{
pointEl: document.querySelector(".myEl"),
offsets: [50, 50],
},
];
stickyAnimator(stkAnimationObjs);There are few resons why I made this kind of syntax. One of them is to controll all of the animation from one place. It has a limitation that, you should not change the position of the sticky element
- Ultra responsive and dinamic.
- Works same as the default scrollbar.
- Scrolling animation is controlled by
CSS. - Works in all browser.
- Works in mobile too.
- Supports all the
CSSwithposition: fixedandposition: sticky - Great
Tabnavigation experience. - Less than 35kb file size.
- Two dimention scroll at a time.
- Fully customisabe scrollbar and animation.
- Easy to handle super complex scroll-based animation.
- supports all the input devices.
- End-less possibilities.
The only limitation is, it does not detect the scrollable element automatically. You have to add the scroller-main-cont class to define a scrollable element. If you don't add this class to a scrollable element there will be the default scrollbar.