Skip to content

Commit 23cb04d

Browse files
Druhin13Druhin13
committed
feat: update package.json for version 1.0.1 and enhance description, keywords, readme
1 parent 99eca6c commit 23cb04d

2 files changed

Lines changed: 266 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 248 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,248 @@
1-
# rt-smooth-scroll
1+
# rt-smooth-scroll
2+
3+
![Platform: Web](https://img.shields.io/badge/platform-web-000000)
4+
![JavaScript](https://img.shields.io/badge/language-JavaScript-F7DF1E?logo=javascript)
5+
[![npm version](https://img.shields.io/npm/v/%40rethink-js%2Frt-smooth-scroll.svg)](https://www.npmjs.com/package/@rethink-js/rt-smooth-scroll)
6+
[![jsDelivr hits](https://data.jsdelivr.com/v1/package/npm/@rethink-js/rt-smooth-scroll/badge)](https://www.jsdelivr.com/package/npm/@rethink-js/rt-smooth-scroll)
7+
[![bundle size](https://img.shields.io/bundlephobia/min/%40rethink-js%2Frt-smooth-scroll)](https://bundlephobia.com/package/@rethink-js/rt-smooth-scroll)
8+
[![License: MIT](https://img.shields.io/badge/License-MIT-FFD632.svg)](https://opensource.org/licenses/MIT)
9+
10+
`rt-smooth-scroll` is a lightweight JavaScript library that seamlessly integrates the **Lenis smooth scroll engine** into your sites with:
11+
12+
- **Automatic Lenis loading** (no extra installs/styles needed)
13+
- **Zero-config defaults** that work out of the box
14+
- Support for **multiple smooth scroll instances**
15+
- A clean global API under `window.rtSmoothScroll`
16+
- Automatic resize + mutation observation for reliable reflow handling
17+
- Per-instance configuration via HTML attributes
18+
- Console logs showing each instance’s final resolved config
19+
20+
**Lenis GitHub:** https://github.com/studio-freight/lenis :contentReference[oaicite:0]{index=0}
21+
22+
---
23+
24+
# Table of Contents
25+
26+
- [1. Installation](#1-installation)
27+
- [1.1 CDN (jsDelivr)](#11-cdn-jsdelivr)
28+
- [1.2 npm](#12-npm)
29+
- [2. Quick Start](#2-quick-start)
30+
- [3. Activation Rules](#3-activation-rules)
31+
- [4. Configuration (HTML Attributes)](#4-configuration-html-attributes)
32+
- [5. Multiple Instances](#5-multiple-instances)
33+
- [6. Global API](#6-global-api)
34+
- [7. Console Logging](#7-console-logging)
35+
- [8. Troubleshooting](#8-troubleshooting)
36+
- [9. License](#9-license)
37+
38+
---
39+
40+
## 1. Installation
41+
42+
### 1.1 CDN (jsDelivr)
43+
44+
```html
45+
<script src="https://cdn.jsdelivr.net/npm/@rethink-js/rt-smooth-scroll@latest/dist/index.min.js"></script>
46+
```
47+
48+
### 1.2 npm
49+
50+
```bash
51+
npm install @rethink-js/rt-smooth-scroll
52+
```
53+
54+
Then bundle or load `dist/index.min.js` as appropriate for your build setup.
55+
56+
---
57+
58+
## 2. Quick Start
59+
60+
Add the script to your page. With no configuration provided, `rt-smooth-scroll` will:
61+
62+
- Enable itself automatically
63+
- Apply recommended default settings to `<body>`
64+
- Load Lenis from CDN
65+
- Create a root smooth scroll instance
66+
- Expose the global API
67+
68+
Example:
69+
70+
```html
71+
<script src="https://cdn.jsdelivr.net/npm/@rethink-js/rt-smooth-scroll@latest/dist/index.min.js"></script>
72+
```
73+
74+
---
75+
76+
## 3. Activation Rules
77+
78+
The library is activated when:
79+
80+
- The attribute `rt-smooth-scroll` exists on `<html>` or `<body>` **OR**
81+
- You place one or more elements with `rt-smooth-scroll-instance`
82+
83+
If neither is present and no instance elements are found, it **auto-enables** itself on `<body>` with defaults.
84+
85+
---
86+
87+
## 4. Configuration (HTML Attributes)
88+
89+
### Root Mode
90+
91+
Add to `<html>` or `<body>` to enable:
92+
93+
```html
94+
<body rt-smooth-scroll></body>
95+
```
96+
97+
### Global Options
98+
99+
Place on `<html>` or `<body>` to configure defaults:
100+
101+
```html
102+
<body
103+
rt-smooth-scroll
104+
rt-smooth-scroll-lerp="0.2"
105+
rt-smooth-scroll-wheel-multiplier="1"
106+
rt-smooth-scroll-easing="easeOutCubic"
107+
></body>
108+
```
109+
110+
**Core attributes:**
111+
112+
| Attribute | Description |
113+
| -------------------------------------- | --------------------------- |
114+
| `rt-smooth-scroll-duration` | Lenis `duration` value |
115+
| `rt-smooth-scroll-lerp` | Lenis `lerp` value |
116+
| `rt-smooth-scroll-orientation` | Scroll orientation |
117+
| `rt-smooth-scroll-gesture-orientation` | Gesture orientation |
118+
| `rt-smooth-scroll-normalize-wheel` | Normalize wheel input |
119+
| `rt-smooth-scroll-wheel-multiplier` | Multiplies wheel delta |
120+
| `rt-smooth-scroll-sync-touch` | Sync touch behavior |
121+
| `rt-smooth-scroll-touch-multiplier` | Multiplies touch delta |
122+
| `rt-smooth-scroll-infinite` | Enable infinite scroll mode |
123+
| `rt-smooth-scroll-easing` | Named easing function |
124+
125+
**Easing options include:**
126+
127+
- `linear`
128+
- `easeInQuad`
129+
- `easeOutQuad`
130+
- `easeInOutQuad`
131+
- `easeInCubic`
132+
- `easeOutCubic`
133+
- `easeInOutCubic`
134+
- `easeInOutSine`
135+
- `easeOutExpo`
136+
137+
### Per-Instance Configuration
138+
139+
Add attributes to any scroll container:
140+
141+
```html
142+
<div
143+
rt-smooth-scroll-instance
144+
rt-smooth-scroll-id="panel"
145+
rt-smooth-scroll-content=".scroll-content"
146+
rt-smooth-scroll-lerp="0.18"
147+
></div>
148+
```
149+
150+
| Attribute | Description |
151+
| --------------------------- | ---------------------------- |
152+
| `rt-smooth-scroll-instance` | Marks scroll container |
153+
| `rt-smooth-scroll-id` | Optional instance identifier |
154+
| `rt-smooth-scroll-content` | Selector inside container |
155+
156+
### Advanced JSON
157+
158+
You may pass additional Lenis options via:
159+
160+
```html
161+
<body
162+
rt-smooth-scroll
163+
rt-smooth-scroll-options-json='{"overscroll":true}'
164+
></body>
165+
```
166+
167+
---
168+
169+
## 5. Multiple Instances
170+
171+
`rt-smooth-scroll` supports any number of independent Lenis instances on a page. Each instance has its own wrapper + content and can be controlled individually via API.
172+
173+
---
174+
175+
## 6. Global API
176+
177+
After initialization, access:
178+
179+
```js
180+
window.rtSmoothScroll;
181+
```
182+
183+
### Common methods:
184+
185+
| Method | Description |
186+
| -------------- | -------------------------------- |
187+
| `ids()` | Array of registered instance ids |
188+
| `get(id)` | Returns Lenis instance |
189+
| `start(id?)` | Start scroll |
190+
| `stop(id?)` | Stop scroll |
191+
| `toggle(id?)` | Toggle scroll |
192+
| `resize(id?)` | Trigger Lenis resize |
193+
| `destroy(id?)` | Remove instance |
194+
195+
**Default root Lenis instance** is also exposed as:
196+
197+
```js
198+
window.lenis;
199+
```
200+
201+
---
202+
203+
## 7. Console Logging
204+
205+
On startup, each instance logs:
206+
207+
- Instance ID
208+
- Wrapper element
209+
- Content element
210+
- Final resolved options
211+
212+
This helps you confirm exactly what configuration is applied in the browser.
213+
214+
---
215+
216+
## 8. Troubleshooting
217+
218+
### Scroll feels laggy
219+
220+
- Lower `lerp` (e.g., `0.18–0.3`) for snappier response.
221+
- Avoid combining duration and lerp unintentionally.
222+
223+
### Instance not initialized
224+
225+
Ensure you’ve enabled either:
226+
227+
- the root attribute (`rt-smooth-scroll`), or
228+
- one or more instance elements.
229+
230+
### Lenis fails to load
231+
232+
If using a custom `rt-smooth-scroll-lenis-src`, confirm the URL points to a valid Lenis build.
233+
234+
---
235+
236+
## 9. License
237+
238+
MIT License
239+
240+
Package: `@rethink-js/rt-smooth-scroll`
241+
<br>
242+
GitHub: [https://github.com/Rethink-JS/rt-smooth-scroll](https://github.com/Rethink-JS/rt-smooth-scroll)
243+
244+
---
245+
246+
by **Rethink JS**
247+
<br>
248+
[https://github.com/Rethink-JS](https://github.com/Rethink-JS)

‎package.json‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,20 @@
11
{
22
"name": "@rethink-js/rt-smooth-scroll",
3-
"version": "1.0.0",
4-
"description": "Smooth scrolling using Lenis (auto-load + attribute config + multi-instance)",
3+
"version": "1.0.1",
4+
"description": "Lightweight smooth scrolling powered by Lenis with automatic loading, attribute config, and multi-instance support.",
5+
"keywords": [
6+
"smooth-scroll",
7+
"lenis",
8+
"scroll",
9+
"javascript",
10+
"ui",
11+
"animation",
12+
"interactive",
13+
"scrolling",
14+
"rt-smooth-scroll",
15+
"rethink-js"
16+
],
17+
"author": "Rethink JS <opensource@rethink-js.org> (https://github.com/Rethink-JS)",
518
"license": "MIT",
619
"repository": {
720
"type": "git",
@@ -22,6 +35,9 @@
2235
"build": "node scripts/build.mjs",
2336
"prepublishOnly": "npm run build"
2437
},
38+
"publishConfig": {
39+
"access": "public"
40+
},
2541
"devDependencies": {
2642
"esbuild": "^0.27.2"
2743
}

0 commit comments

Comments
 (0)