tarun-dugar / Easy Scroll
Licence: mit
A lightweight native javascript library to perform smooth scrolling with animation
Stars: ✭ 96
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Easy Scroll
Moveto
A lightweight scroll animation javascript library without any dependency
Stars: ✭ 2,746 (+2760.42%)
Mutual labels: scrolling, smooth-scrolling
really-smooth-scroll
A script that smoothen scrolling in the browser
Stars: ✭ 21 (-78.12%)
Mutual labels: scrolling, smooth-scrolling
Smoothscrollanimations
Demo of a tutorial on how to add smooth page scrolling with an inner image animation
Stars: ✭ 238 (+147.92%)
Mutual labels: scrolling, smooth-scrolling
Scrollissimo
Javascript plugin for smooth scroll-controlled animations
Stars: ✭ 160 (+66.67%)
Mutual labels: scrolling, smooth-scrolling
React Scroll To
Scroll to a position in React
Stars: ✭ 348 (+262.5%)
Mutual labels: scrolling, smooth-scrolling
web-animation-club
CSS controlled animations with transitionEnd, onTransitionEnd, animationend, onAnimationEnd events and frame throwing. Tiny javascript library with cross-browser methods to handle css animation/transition callbacks and event loop frame throwing. 📚🖥️📱
Stars: ✭ 52 (-45.83%)
Mutual labels: javascript-library, animation-library
Fat
Web's fastest and most lightweight animation tool.
Stars: ✭ 157 (+63.54%)
Mutual labels: animation-library, javascript-library
Sweet Scroll
🍭 ECMAScript2015+ & TypeScript Friendly, dependency-free smooth scroll library.
Stars: ✭ 380 (+295.83%)
Mutual labels: scrolling, smooth-scrolling
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (+180.21%)
Mutual labels: scrolling, smooth-scrolling
lexicon-mono-seq
DOM Text Based Multiple Sequence Alignment Library
Stars: ✭ 15 (-84.37%)
Mutual labels: javascript-library, animation-library
Mac Mouse Fix
Mac Mouse Fix - A simple way to make your mouse better.
Stars: ✭ 362 (+277.08%)
Mutual labels: scrolling, smooth-scrolling
Scroll Into View If Needed
Element.scrollIntoView ponyfills for things like "if-needed" and "smooth"
Stars: ✭ 811 (+744.79%)
Mutual labels: scrolling, smooth-scrolling
Tag Handler
Tag Handler is a jQuery plugin used for managing tag-type metadata.
Stars: ✭ 76 (-20.83%)
Mutual labels: javascript-library
Zifi
zifi - Make Stories everywhere using React 😍
Stars: ✭ 87 (-9.37%)
Mutual labels: javascript-library
Ac D3
Javascript Library for building Audiovisual Charts in D3
Stars: ✭ 76 (-20.83%)
Mutual labels: javascript-library
Scroll Behavior Polyfill
A polyfill for the 'scroll-behavior' CSS-property
Stars: ✭ 76 (-20.83%)
Mutual labels: smooth-scrolling
Accordion
Accordion module created in pure javascript & CSS. Very useful to create FAQ lists on your website.
Stars: ✭ 94 (-2.08%)
Mutual labels: javascript-library
Floatingtoast
Android library to create customizable floating animated toasts like in Clash Royale app
Stars: ✭ 86 (-10.42%)
Mutual labels: animation-library
Easings
A port of Robert Penner's easing equations to kotlin on Android to add flavors to your animations
Stars: ✭ 76 (-20.83%)
Mutual labels: animation-library
Floatthead
Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
Stars: ✭ 1,193 (+1142.71%)
Mutual labels: scrolling
A lightweight native javascript library to perform smooth scrolling.
Features
- ~3 KB before gzip
- no dependencies
- scrolling in any direction - left, right, bottom, top
- specify the amount in pixels that needs to be scrolled
- ability to scroll any kind of scrollable element - window, div etc.
- controlling the pace of the scrolling by specifying predefined easing presets or bezier curve points
- ability to cancel the scrolling at any time via callback
Installation
npm install easy-scroll --save
Or you can load it via a script tag as follows:
<script src="https://unpkg.com/easy-scroll" />
Importing
ES6
import easyScroll from 'easy-scroll';
CommonJS
var easyScroll = require('easy-scroll');
Global variable
the variable easyScroll attached to window or this depending on what environment you are using
API
A function is exported by default which accepts an object with the following configuration as an argument:
| Property | Value |
|---|---|
| scrollableDomEle (required) |
window or any other scrollable DOM element |
| direction (required) | the direction in which you want the element to scroll - top, left, bottom, right |
| duration (required) | the duration in milliseconds over which you want the scrolling to happen |
| easingPreset | linear(default), easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint |
| cubicBezierPoints | object containing the 4 points to define a bezier curve { 'x1': Number(>= 0 and <= 1), 'y1': Number, 'x2': Number(>= 0 and <= 1), 'y2': Number } |
| onRefUpdateCallback | callback function which is called on each tick of the scroll. The current instance of the scrolling animation is passed as an argument by default. You can use cancelAnimationFrame on this instance to cancel the scrolling. |
| onAnimationCompleteCallback | callback function which is called after the scrolling is done |
| scrollAmount | the amount that needs to be scrolled in pixels. If this is not specified, the element will be scrolled to the end. |
Example Usage
import easyScroll from 'easy-scroll';
easyScroll({
'scrollableDomEle': window,
'direction': 'bottom',
'duration': 2000,
'easingPreset': 'easeInQuad',
'scrollAmount': 1000
});
Browser Support
Supported on all modern browsers. For older browsers, you would need the polyfills for requestAnimationFrame and cancelAnimationFrame.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].