Smooth Scroll Snapping Framework Agnostic Library | PanelSnap

PANELSNAP is a JavaScript plugin that, after scrolling, snaps onto blocks of content that I like to call panels. Its API makes it easy to design the plugin according to the needs of your project. Each of the following panels will explain a specific aspect of the PanelSnap plug-in.

PanelSnap is a JavaScript library that does not depend on the framework. This means that it works in every JavaScript project, whether you’re using Vue, React, jQuery, or plain vanilla JavaScript. It can capture both horizontally and vertically, call menus, and fire events based on user behavior.

smooth scroll jquery plugin, control scrolling javascript, smooth mouse scroll jquery, smooth scroll section jquery, horizontal smooth scroll jquery, scroll snap js

How to make use of it:

1. Install and import the panelSnap with NPM.

# NPM
$ npm i panelsnap --save
import PanelSnap from 'panelsnap';

2. Or include the¬†panelSnap’s JavaScript on the web page.

<!-- jQuery Is Optional -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- panelSnap Plugin -->
<script src="/path/to/lib/panelsnap.umd.js"></script>

3. Create a set of panels you need to scroll.

<section>
  Section 1
</section>

<section>
  Section 2
</section>

<section>
  Section 3
</section>

...

4. Make the content sections full web pages.

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
}

5. Enable the plugin and completed it.

new PanelSnap();

5. Possible choices to customize the plugin.

new PanelSnap({

    // parent container
    container: document.body,

    // panel selector
    panelSelector: '> section',

    // threshold
    directionThreshold: 50,

    // scroll delay
    delay: 0,

    // duration in milliseconds
    duration: 300,

    // easing function
    easing: function(t) { return t }
    
});

6. API strategies.

const instance = new PanelSnap();

// scroll to a specific element
instance.snapToPanel(element);

// destroy the instance
instance.destroy();

. Event handlers.

const instance = new PanelSnap();

instance.on('activatePanel', function(){
  // do something
})

instance.on('snapStart', function(){
  // do something
})

instance.on('snapEnd', function(){
  // do something
})

instance.on('snapStop', function(){
  // do something
})

OPTIONS EXPLAINED

container
(element) The (scrolling) container that contains the panels.
panelSelector
(string) The css selector to find the panels. (scoped within the container).
directionThreshold
(interger) The amount of pixels required to scroll before the plugin detects a direction and snaps to the next panel.
delay
(integer) The amount of miliseconds the plugin pauzes before snapping to a panel.
duration
(integer) The amount of miliseconds in which the plugin snaps to the desired panel.
easing
(function) An easing function specificing the snapping motion.

API

on([string] eventName, [function] callbackFunction(panel))
Subscribe to a specific event with your own function. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction is a function that gets called with the panel that is the subject of the event.
off([string] eventName, [function] callbackFunction(panel))
Unsubscribe one of your subscriptions. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction is the function that was used to subscribe to the event.
snapToPanel([DOM Element] panel)
Trigger a snap to a panel. Where panel is one of the panels within the container.
destroy()
Destroy the panelsnap instance and clear all state & eventlisteners. This allows for a new PanelSnap instance to be created on the same container if so desired.

Smooth Scroll Snapping, PanelSnap Plugin/Github, smoothscroll js demo, full page scroll jquery plugin


See Demo And Download

Official Website(guidobouman): Click Here

This superior jQuery/javascript plugin is developed by guidobouman. For extra Advanced Usages, please go to the official website.

Related Posts

drag-drop-file-5x5-jq-uploader

Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…

Bootstrap-Dark-Mode

Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…

responsive-navigation-menu

Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…

Simple-Multi-Select-Dropdown-Pure-Vanilla-Javascript

Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

how-to-create-popup-in-html-with-css

How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…