ScrollPage.js

Simple full page scroll animation


                    const scrollPage = new ScrollPage("#main-page");
                
                    
#main-page {
    width: 100%;
}

#main-page .page-item {
    width: 100%;
    height: 100vh;
}
                    
                
                    
<div id="main-page"> 
    <div class="page-item" ></div> 
    <div class="page-item" ></div> 
    <div class="page-item" ></div> 
</div>

Easing Animation

All easing animation from easings.net

                    
const scrollPage = new ScrollPage("#main-page", {
    animation: "easeInQuart",
    time: 1000,
    //custom animation each page item (start from page 1)
    pages: {
        2: {
            animation: "easeOutBack",
            time: 700
        },
    }
});

Or you can make animation with your own formula

                    
const scrollPage = new ScrollPage("#main-page", {
    animation: "easeInQuart",
    time: 1000,
    //custom animation each page item (start from page 1)
    pages: {
        2: {
            animation: animation: function(x) {
                const c1 = 1.70158;
                const c3 = c1 + 1;
                
                return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
            },
            time: 700
        },
    }
});

Event

Get all progres with event

                    
scrollPage.onScroll(function(e){
    console.log("Leaving from : "+e.currentPageName);//only fire if you keep scroll your mouse wheel
    console.log("Scroll to : "+e.nextPageName);
});

scrollPage.onMove(function(e){
    console.log("Move to : "+e.nextPageName);//will be fired every frame along with the animation (both moving with menu or mouse wheel)
});

scrollPage.onStart(function(e){
    console.log("The previous page was : "+e.currentPageName);
    console.log("The next page is : "+e.nextPageName);
});

scrollPage.onFinish(function(e){
    console.log("Arrived at : "+e.currentPageName); //will be have same value as next page because is already arrived/finish
    console.log("Done Go to : "+e.nextPageName);
});

scrollPage.on('page3',function(e){
    console.log("Event on Page 3");
    
});

Github