Package Exports

@bornfight/b-scroll-next
@bornfight/b-scroll-next/src/js/ScrollNext.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@bornfight/b-scroll-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

b-scroll-next [all b- libs]

Bornfight frontend micro lib for scrolling to next section

GitHub package.json version GitHub package.json dynamic GitHub issues GitHub

📦 Getting Started

Dependency: gsap

install b-scroll-next trough npm or pull ti from git

npm i @bornfight/b-scroll-next

include b-scroll-next to your JS after running npm install

🔨️ Usage

JS

import ScrollNext from "@bornfight/b-scroll-next";

new ScrollNext();

HTML markup

<p class="js-scroll-next">
    Go next
</p>

Basic usage tips

all elements with .js-scroll-next class will trigger scroll

💎 Customization

import ScrollNext from "@bornfight/b-scroll-next";

new ScrollNext({
    element: ".js-links",
    ease: "expo.inOut",
    duration: 5,
    offset: 200
});

✅ Properties

Option	Type	Default	Example	Description
element	string	".js-scroll-next"	".js-my-scroll-element"	Elements that will be used as "scroll next" triggers
offset	number	0	200	number type value - scroll will be offset by that amount in pixels
ease	string	"power3.inOut"	"expo.out"	Scroll ease can be modified (gsap eases)
duration	number	0.5	10	Duration of the scroll in seconds

🚀 Useful to know

offset will reflect to every element inside that instance
without any option it will scroll just below clicked element

📦 Contribute

Gulp based system

Gulp 4 used
browsersync for live reload

npm run dev - dev environent with browsersync

@bornfight/b-scroll-next