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