@bornfight/b-scroll-next

b-scroll-next [all b- libs]

Bornfight frontend micro lib for scrolling to next section

📦 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

1. offset will reflect to every element inside that instance
2. 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

License

MIT © Bornfight