Touch-friendly Full Page Scroll Animation In JavaScript – scrollpage.js

Category: Animation , Javascript | February 10, 2023
Views Total:622 views
Official Page:Go to website
Last Update:February 10, 2023


Touch-friendly Full Page Scroll Animation In JavaScript – scrollpage.js


scrollpage.js is a simple, configurable, and mobile-friendly one page scroll library for landing pages and single-page web applications.

After installing the scrollpage.js library, your visitors can smoothly scroll through your content with just a mouse wheel or a touch swipe, bringing them a more immersive and interactive browsing experience.

How to use:

1. Download and import the scrollpage.min.js library.

<script src="./scrollpage.min.js"></script>

2. Add page items to the document as follows:

<div id="presentation">
  <div id="page1" class="page-item"></div>
  <div id="page2" class="page-item"></div>
  <div id="page3" class="page-item"></div>

3. Make page items full-page.

#presentation {
  width: 100%;
#presentation .page-item {
  width: 100%;
  height: 100vh;

4. Add a side nav to the page. OPTIONAL.

<ul class="side-nav">
  <li data-page="#page1"><span>Page</span> 1</li>
  <li data-page="#page2"><span>Page</span> 2</li>
  <li data-page="#page3"><span>Page</span> 3</li>

5. Initialize the scrollpage.js.

const scrollPage = new ScrollPage("#presentation", {
      menu: "ul.side-nav",

6. Config the full page scroll animation.

const scrollPage = new ScrollPage("#presentation", {
      // easing functions
      animation: "easeInSine",
      // animation speed
      time: 500,
      // show/hide scrollbar
      scrollBar: false,
      // css class name for active page element
      // css class name for active menu item
      // trigger scrollpage if scrolling content reach bottom or top
      triggerScrollChildren: false,
      // relative to parent height or nor
      relative: false,

7. You can also configure different animation options for each page individually.

const scrollPage = new ScrollPage("#presentation", {
          animation: "easeInQuart",
          time: 500
          animation: "easeOutQuint",
          time: 600
          animation: "easeOutCubic",
          time: 700

8. Events.

/* {
  sp,// scrollpage object
  currentPage,// current page number (origin page)
  nextPage,// next page number (destination page)
  currentPageName,// current page name (if have `id` otherwise  will olny return page number)
  nextPageName,// next page name (if have `id` otherwise  will olny return page number)
  index,// current page index (start from 0)
  console.log("Leaving from : "+e.currentPageName);
  console.log("Scroll to : "+e.nextPageName);
  console.log("Move to : "+e.nextPageName);
  console.log("The previous page was : "+e.currentPageName);
  console.log("The next page is : "+e.nextPageName);
  console.log("Arrived at : "+e.currentPageName); 
  console.log("Done Go to : "+e.nextPageName);
  console.log("Event 1 on : "+e.currentPageName);
  console.log("Event 2 on : "+e.nextPageName);

9. Scroll to a specific page.


You Might Be Interested In:

Leave a Reply