https://github.com/admataz/svelte-scrollmation
Svelte component to wrap content and give it scrolling superpowers. https://scrollmation.demo.admataz.com/
https://github.com/admataz/svelte-scrollmation
Last synced: 4 months ago
JSON representation
Svelte component to wrap content and give it scrolling superpowers. https://scrollmation.demo.admataz.com/
- Host: GitHub
- URL: https://github.com/admataz/svelte-scrollmation
- Owner: admataz
- License: mit
- Created: 2020-05-01T23:26:00.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T01:22:15.000Z (about 4 years ago)
- Last Synced: 2025-10-20T09:04:53.635Z (9 months ago)
- Language: HTML
- Size: 134 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Scrollmation
A [svelte.js](https://svelte.dev) component. Wrap you content with this, and give it reactive scrolling superpowers.
## Usage in a `svelte` component:
`Scrollmation` component to wrap your component
Events:
- `next` - scroll has reached the end position - good time to trigger the next thing
- `prev` - scroll has reached the start position - good time to trigger the previous thing
- `home` - scroll has settled on the landing position (usually on first load)
- `scroll` - fires while there is movement with updated position values - good to use for responsive transitions:
You could
- Grow
- Fade
- Move item
- Rotate item
- Change colour
- Trigger another animation
- Horizontal pan
- Zoom panorama
- Parallax effect
- ...
It's really up to you.
Example:
```html
// import the component and helper functions
import Scrollmation, {
toHomeRatio,
toStartRatio,
toEndRatio,
toRangeRatio,
fullRangePx,
toHomePx,
toEndPx,
toStartPx
} from "scrollmation";
// set some variable values to use in the render
let rangeRatio
// event handler
function onScroll({ type, detail }) {
rangeRatio = toHomeRatio(detail)
}
main {
text-align: center;
height: 100%;
}
h1 {
font-size: 10em;
}
🌞
```
## Web Component usage
More limited capability - but useful for some instances.
See the example in [./public/index.html](./public/index.html)
[License MIT](/LICENSE)
Copyright 2020 Adam Davis