Skip to content

Commit

Permalink
add modal/infinite examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@clementroche
clementroche committed Feb 15, 2024
1 parent 8f6f465 commit c3f82d8
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 4 deletions.
6 changes: 4 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ See documentation for [react-lenis](https://github.com/studio-freight/lenis/tree
| `wheelMultiplier` | `number` | `1` | The multiplier to use for mouse wheel events |
| `touchMultiplier` | `number` | `1` | The multiplier to use for touch events |
| `normalizeWheel` | `boolean` | `false` | Normalize wheel inputs across browsers (not reliable atm) |
| `infinite` | `boolean` | `false` | Enable infinite scrolling! |
| `infinite` | `boolean` | `false` | Enable infinite scrolling! ([See example](https://codepen.io/ClementRoche/pen/OJqBLod)) |
| `autoResize` | `boolean` | `true` | Resize instance automatically based on `ResizeObserver`. If `false` you must resize manually using `.resize()` |

<br/>
Expand Down Expand Up @@ -203,6 +203,8 @@ html.lenis {
<div data-lenis-prevent-touch>scroll content</div>
```

[See modal example](https://codepen.io/ClementRoche/pen/PoLdjpw)

### Anchor links
```html
<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>
Expand All @@ -213,7 +215,7 @@ html.lenis {
## Limitations

- no support for CSS scroll-snap
- capped to 60fps on Safari ([source](https://bugs.webkit.org/show_bug.cgi?id=173434))
- capped to 60fps on Safari ([source](https://bugs.webkit.org/show_bug.cgi?id=173434)) and 30fps on low power mode
- smooth scroll will stop working over iframe since they don't forward wheel events
- position fixed seems to lag on MacOS Safari pre-M1 ([source](https://github.com/studio-freight/lenis/issues/103))

Expand Down
6 changes: 4 additions & 2 deletions packages/lenis/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ See documentation for [react-lenis](https://github.com/studio-freight/lenis/tree
| `wheelMultiplier` | `number` | `1` | The multiplier to use for mouse wheel events |
| `touchMultiplier` | `number` | `1` | The multiplier to use for touch events |
| `normalizeWheel` | `boolean` | `false` | Normalize wheel inputs across browsers (not reliable atm) |
| `infinite` | `boolean` | `false` | Enable infinite scrolling! |
| `infinite` | `boolean` | `false` | Enable infinite scrolling! ([See example](https://codepen.io/ClementRoche/pen/OJqBLod)) |
| `autoResize` | `boolean` | `true` | Resize instance automatically based on `ResizeObserver`. If `false` you must resize manually using `.resize()` |

<br/>
Expand Down Expand Up @@ -203,6 +203,8 @@ html.lenis {
<div data-lenis-prevent-touch>scroll content</div>
```

[See modal example](https://codepen.io/ClementRoche/pen/PoLdjpw)

### Anchor links
```html
<a href="#anchor" onclick="lenis.scrollTo('#anchor')">scroll to anchor</a>
Expand All @@ -213,7 +215,7 @@ html.lenis {
## Limitations

- no support for CSS scroll-snap
- capped to 60fps on Safari ([source](https://bugs.webkit.org/show_bug.cgi?id=173434))
- capped to 60fps on Safari ([source](https://bugs.webkit.org/show_bug.cgi?id=173434)) and 30fps on low power mode
- smooth scroll will stop working over iframe since they don't forward wheel events
- position fixed seems to lag on MacOS Safari pre-M1 ([source](https://github.com/studio-freight/lenis/issues/103))

Expand Down

1 comment on commit c3f82d8

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"⚡️ Lighthouse report for the changes in this commit:

🔴 Performance: 31
🟠 Accessibility: 88
🟢 Best practices: 100
🟠 SEO: 67
🔴 PWA: 0

Lighthouse ran on https://gsap.com/requires-membership/?plugin=SplitText&source=trial"

Please sign in to comment.