(null);
useEffect(() => {
if (!viewportRef.current || !contentRef.current) return;
const amber = new Amber({
wrapper: viewportRef.current,
content: contentRef.current,
renderer: transform,
plugins: [snap, parallax],
snap: 'proximity',
});
return () => {
amber.destroy();
};
}, []);
return (
);
}
```
```css
.viewport {
height: 100dvh;
overflow: hidden;
}
.panels {
display: flex;
flex-direction: column;
}
.panel {
flex: none;
min-height: 100dvh;
}
```
---
### Vue 3 (Composition API)
```vue
```
---
## Combining with `amber-motion`
If you are using [`amber-motion`](https://github.com/realhardik/amber/tree/main/packages/motion), you can bind animations directly to Amber's smoothed scroll position without running separate RAF loops.
```js
import Amber from 'amber-scroll';
import Motion, { bindScroll } from 'amber-motion';
const amber = new Amber({ orientation: 'both' });
// Create an animation
const heroAnimation = new Motion({
targets: '.hero-heading',
properties: {
y: { v: [0, -100], unit: 'px' },
o: [1, 0],
},
});
// Scrub animation progress against the Y scroll axis from 0px to 500px:
const binding = bindScroll(amber, heroAnimation, {
source: 'position',
axis: 'y', // In 2D instances: 'x' or 'y' (defaults to primary axis)
start: 0,
end: 500,
destroyAnimation: true, // Automatically cleans up animation when amber is destroyed
});
```
---
## TypeScript
TypeScript declarations ship with the package and support all vector types and plugin configurations:
```ts
import Amber, {
type AmberOptions,
type ScrollState,
type SectionEntry,
type PinOptions,
type Vector,
type VectorTarget,
} from 'amber-scroll';
import transform from 'amber-scroll/transform';
import snap from 'amber-scroll/snap';
import { parallax, pinning } from 'amber-scroll/effects';
const options: AmberOptions = {
orientation: 'both',
renderer: transform,
plugins: [snap, parallax, pinning],
damping: 0.08,
snap: 'proximity',
};
const amber = new Amber(options);
amber.on('scroll', (state: ScrollState) => {
const current: Vector = state.positionVector;
console.log(current.x, current.y);
});
```
---
## License
MIT © [Hardik Gandhi](https://hardikgandhi.me)
### Error diagnostics
Published builds keep runtime validation but report compact `Amber Axxx` error codes. See [the error reference](./ERRORS.md) for their meanings. Source imports retain descriptive messages.
