Have opinions about JavaScript? We want to hear them. Take the 2018 JavaScript Ecosystem Survey »

scroll-animator

2.0.0 • Public • Published

scroll-animator

npm version Build status

Smart, lightweight functions to animate browser scroll.

  • Scroll the page or a specific element.
  • Scroll vertically and horizontally.
  • Scroll to a target element or an arbitrary position, with an optional offset.
  • Scroll animations can be interrupted by the user or other scripts (no “fighting” animations).
  • Scroll animations adapt to a moving target; handy when loading affects layout.
  • Intuitive easeInOutCubic animation timing; a soft acceleration and deceleration.
  • < 1 KB bundle size, guaranteed by size-limit tests.
  • SSR friendly.

Setup

Install with npm:

npm install scroll-animator

Support

Browserslist query: > 0.5%, not dead, node 6.

Consider polyfilling:

API

Table of contents

function animateScroll

Smoothly scrolls an element to a target position within the element. Scroll interference caused by the user or another script interrupts the animation.

Parameter Type Description
options Object Options.
options.container HTMLElement? = document.scrollingElement Container element to scroll.
options.targetX number? Target X position within the container, defaulting to the current position.
options.targetY number? Target Y position within the container, defaulting to the current position.
options.offsetX number? = 0 Target X position offset.
options.offsetY number? = 0 Target Y position offset.
options.duration number? = 500 Total scroll animation duration in milliseconds.
options.onInterrupt function? Callback to run if the scroll animation is interrupted.
options.onArrive function? Callback to run after scrolling to the target.

Examples

Horizontally scroll an element to a certain position.

import { animateScroll } from 'scroll-animator'
 
animateScroll({
  container: document.getElementById('panner'),
  targetX: 400
})

function scrollToElement

Scrolls a container to a target element, using animateScroll. The animation adapts to a moving target; handy when loading affects layout.

Parameter Type Description
options Object Options.
options.container HTMLElement? = document.scrollingElement Container element to scroll.
options.target HTMLElement Target element to scroll to.
options.offsetX number? = 0 Target X position offset.
options.offsetY number? = 0 Target Y position offset.
options.duration number? = 500 Total scroll animation duration in milliseconds.
options.onInterrupt function? Callback to run if the scroll animation is interrupted.
options.onArrive function? Callback to run after scrolling to the target.

Examples

Scroll the page to an element.

import { scrollToElement } from 'scroll-animator'
 
scrollToElement({
  target: document.getElementById('contact-us')
})

install

npm i scroll-animator

Downloadsweekly downloads

40

version

2.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability