Skip to content

Commit d75e737

Browse files
Druhin13Druhin13
committed
feat: upgrade to version 1.1.0 with various improvements and bug fixes
- Updated the version number in package.json to 1.1.0. - Enhanced the smooth scroll functionality in index.min.js with new features and optimizations. - Refactored index.js to improve code readability and maintainability, including better handling of options and attributes. - Added support for additional configuration options and improved the parsing of attributes. - Introduced debug logging for instance creation to aid in development. - Removed unused observer functionality to streamline the code.
1 parent d7e49b5 commit d75e737

5 files changed

Lines changed: 435 additions & 348 deletions

File tree

‎README.md‎

Lines changed: 53 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99

1010
`rt-smooth-scroll` is a lightweight JavaScript library that seamlessly integrates the **Lenis smooth scroll engine** into your sites with:
1111

12-
- **Automatic Lenis loading** (no extra installs/styles needed)
13-
- **Zero-config defaults** that work out of the box
12+
- **Automatic Lenis loading** (no extra installs needed)
13+
- **Zero-config defaults** (Lenis defaults, unless you override via attributes)
1414
- Support for **multiple smooth scroll instances**
1515
- A clean global API under `window.rtSmoothScroll`
16-
- Automatic resize + mutation observation for reliable reflow handling
16+
- Optional resize + mutation observation (useful for wrapper instances)
1717
- Per-instance configuration via HTML attributes
1818
- Console logs showing each instance’s final resolved config
1919

20-
**Lenis GitHub:** https://github.com/studio-freight/lenis
20+
**Lenis (GitHub):** https://github.com/darkroomengineering/lenis
2121

2222
---
2323

@@ -59,8 +59,7 @@ Then bundle or load `dist/index.min.js` as appropriate for your build setup.
5959

6060
Add the script to your page. With no configuration provided, `rt-smooth-scroll` will:
6161

62-
- Enable itself automatically
63-
- Apply recommended default settings to `<body>`
62+
- Activate itself automatically (if you didn’t explicitly opt out)
6463
- Load Lenis from CDN
6564
- Create a root smooth scroll instance
6665
- Expose the global API
@@ -71,6 +70,8 @@ Example:
7170
<script src="https://cdn.jsdelivr.net/npm/@rethink-js/rt-smooth-scroll@latest/dist/index.min.js"></script>
7271
```
7372

73+
> Note: If you do not set any `rt-smooth-scroll-*` config attributes, the root instance uses **Lenis defaults**.
74+
7475
---
7576

7677
## 3. Activation Rules
@@ -80,7 +81,7 @@ The library is activated when:
8081
- The attribute `rt-smooth-scroll` exists on `<html>` or `<body>` **OR**
8182
- You place one or more elements with `rt-smooth-scroll-instance`
8283

83-
If neither is present and no instance elements are found, it **auto-enables** itself on `<body>` with defaults.
84+
If neither is present and no instance elements are found, it **auto-enables** itself on `<body>` by adding `rt-smooth-scroll` (so you get a working root instance by default).
8485

8586
---
8687

@@ -107,22 +108,29 @@ Place on `<html>` or `<body>` to configure defaults:
107108
></body>
108109
```
109110

111+
Important Lenis behavior:
112+
113+
- `duration` and `easing` are **useless if `lerp` is defined** (this is how Lenis works).
114+
110115
**Core attributes:**
111116

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:**
117+
| Attribute | Description |
118+
| ------------------------------------------- | ------------------------------------------------------------ |
119+
| `rt-smooth-scroll-duration` | Lenis `duration` (only applies when `lerp` is not used) |
120+
| `rt-smooth-scroll-lerp` | Lenis `lerp` (0 → 1) |
121+
| `rt-smooth-scroll-orientation` | Lenis `orientation` |
122+
| `rt-smooth-scroll-gesture-orientation` | Lenis `gestureOrientation` |
123+
| `rt-smooth-scroll-normalize-wheel` | Lenis `normalizeWheel` |
124+
| `rt-smooth-scroll-wheel-multiplier` | Lenis `wheelMultiplier` |
125+
| `rt-smooth-scroll-smooth-touch` | Lenis `smoothTouch` |
126+
| `rt-smooth-scroll-sync-touch` | Lenis `syncTouch` |
127+
| `rt-smooth-scroll-sync-touch-lerp` | Lenis `syncTouchLerp` |
128+
| `rt-smooth-scroll-touch-inertia-multiplier` | Lenis `touchInertiaMultiplier` |
129+
| `rt-smooth-scroll-touch-multiplier` | Lenis `touchMultiplier` |
130+
| `rt-smooth-scroll-infinite` | Lenis `infinite` |
131+
| `rt-smooth-scroll-easing` | Named easing function (only applies when `lerp` is not used) |
132+
133+
**Easing options included:**
126134

127135
- `linear`
128136
- `easeInQuad`
@@ -147,11 +155,11 @@ Add attributes to any scroll container:
147155
></div>
148156
```
149157

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 |
158+
| Attribute | Description |
159+
| --------------------------- | -------------------------------------------------------------- |
160+
| `rt-smooth-scroll-instance` | Marks scroll container |
161+
| `rt-smooth-scroll-id` | Optional instance identifier |
162+
| `rt-smooth-scroll-content` | Selector inside container (defaults to first child if omitted) |
155163

156164
### Advanced JSON
157165

@@ -164,6 +172,15 @@ You may pass additional Lenis options via:
164172
></body>
165173
```
166174

175+
### Lenis Loader / Observer Controls
176+
177+
| Attribute | Description |
178+
| ------------------------------------- | ------------------------------------------------------------------------------ |
179+
| `rt-smooth-scroll-lenis-src` | Override Lenis CDN URL |
180+
| `rt-smooth-scroll-observe-resize` | Enable `ResizeObserver` for wrapper instances (default: `true` if supported) |
181+
| `rt-smooth-scroll-observe-mutations` | Enable `MutationObserver` for wrapper instances (default: `true` if supported) |
182+
| `rt-smooth-scroll-resize-debounce-ms` | Debounce resize calls (default: `0`) |
183+
167184
---
168185

169186
## 5. Multiple Instances
@@ -215,10 +232,15 @@ This helps you confirm exactly what configuration is applied in the browser.
215232

216233
## 8. Troubleshooting
217234

218-
### Scroll feels laggy
235+
### Scroll feels laggy / too delayed
236+
237+
- **Increase** `rt-smooth-scroll-lerp` (e.g. `0.2 → 0.35`) for a snappier response.
238+
- **Decrease** `rt-smooth-scroll-lerp` (e.g. `0.1 → 0.05`) for a smoother/heavier feel.
239+
- Leave `rt-smooth-scroll-wheel-multiplier="1"` unless you have a strong reason to change perceived speed.
240+
241+
### Duration / easing doesn’t seem to do anything
219242

220-
- Lower `lerp` (e.g., `0.18–0.3`) for snappier response.
221-
- Avoid combining duration and lerp unintentionally.
243+
Lenis treats `duration` and `easing` as **useless if `lerp` is defined**. If you want time-based behavior, ensure you’re not effectively running in lerp-mode.
222244

223245
### Instance not initialized
224246

@@ -237,12 +259,10 @@ If using a custom `rt-smooth-scroll-lenis-src`, confirm the URL points to a vali
237259

238260
MIT License
239261

240-
Package: `@rethink-js/rt-smooth-scroll`
241-
<br>
262+
Package: `@rethink-js/rt-smooth-scroll` <br>
242263
GitHub: [https://github.com/Rethink-JS/rt-smooth-scroll](https://github.com/Rethink-JS/rt-smooth-scroll)
243264

244265
---
245266

246-
by **Rethink JS**
247-
<br>
267+
by **Rethink JS** <br>
248268
[https://github.com/Rethink-JS](https://github.com/Rethink-JS)

0 commit comments

Comments
 (0)