Skip to content

Show elements as they enter the browser viewport on scroll.

Notifications You must be signed in to change notification settings

dmaynard24/appear-on-scroll

Repository files navigation

appear-on-scroll

Show elements as they enter the browser viewport on scroll.

Getting Started

To get up and running quickly, install the package.

npm install appear-on-scroll --save

Then, initialize it.

import {AppearOnScroll} from 'appear-on-scroll';

const appearOnScroll = new AppearOnScroll(`.appear-on-scroll`, {
	duration: 850,
	once: true,
	slideDistance: `10px`,
});

The first parameter of the AppearOnScroll function is selector and it takes any CSS selector as an argument. The second parameter is options and it takes an object as an argument. In the example above I'm overriding some of the default option values, but you may omit any of them to simply use the defaults.

Options

Key Value Type Default Value Description
delay Number 0 Delay (in milliseconds) before the element will be shown after entering the browser viewport.
duration Number 600 Duration (in milliseconds) of the animation to show the element.
easing String cubic-bezier(0.5, 0, 0, 1) Duration (in milliseconds) of the animation to show the element.
once Boolean false Whether or not the element will be hidden and shown again upon leaving and reentering the browser viewport.
slide Boolean true Whether or not the element will "slide" into place as it's being shown. This is dependent on scroll direction to give it a more natural feel.
slideDistance String 25px How far the element will "slide" into place as it's being shown. This property is dependent on the slide property being set to true.

Authors

Dave Maynard - GitHub