Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matthiaaas/framer-motion-hooks
Fill the hook gap in Framer Motion
https://github.com/matthiaaas/framer-motion-hooks
framer-motion hooks in-view react scroll-progress typescript viewport
Last synced: 7 days ago
JSON representation
Fill the hook gap in Framer Motion
- Host: GitHub
- URL: https://github.com/matthiaaas/framer-motion-hooks
- Owner: matthiaaas
- License: mit
- Archived: true
- Created: 2021-04-05T11:29:18.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-11T02:57:43.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T12:02:36.715Z (10 days ago)
- Topics: framer-motion, hooks, in-view, react, scroll-progress, typescript, viewport
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/framer-motion-hooks
- Size: 69.3 KB
- Stars: 163
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Framer Motion Hooks
Fill the hook gap in Framer Motion.
## Installation
```bash
npm install framer-motion-hooks
```
**Note:** If you prefer `yarn` instead of `npm`, just use `yarn add framer-motion-hooks`.
## Hooks
### [`useInViewScroll`](docs/useInViewScroll.md)
Returns a `MotionValue` representing the y scroll progress that updates when the target element is visible in viewport.
```jsx
const MyComponent = () => {
const ref = useRef()
const progress = useInViewScroll(ref)
return
}
```
[Comprehensive example →](docs/useInViewScroll.md)
#### API
`const scrollProgress = useInViewScroll(ref, options)`
- `scrollProgress`: A number between 0 and 1 indicating relative page scroll
- `ref`: React ref target element
- `options`: _(optional)_ Scroll options (e.g. threshold)
### [`useInViewAnimate`](docs/useInViewAnimate.md) *Deprecated*
**Note:** Deprecated in favor of Framer Motion's native [`whileInView`](https://www.framer.com/docs/gestures/#viewport) prop introduced in version 5.3.
Fires an animation as soon as the element is visible in viewport.
```jsx
const MyComponent = () => {
const { inViewRef, animation } = useInViewAnimate({ animate: "visible" })
return (
)
}
const variants = {
initial: {
x: 0
},
visible: {
x: 200
}
}
```
[Comprehensive example →](docs/useInViewAnimate.md)
**Note**: Also works with direct props on the React element
#### API
`const { inViewRef, animation } = useInViewAnimate(variants, options)`
- `inViewRef`: React ref
- `animation`: Motion animation controls
- `variants`: Motion target object
- `options`: _(optional)_ Intersection options
### [`useMotionAsState`](docs/useMotionAsState.md)
Returns a React state value that updates when the MotionValue changes
```jsx
const MyComponent = () => {
const { scrollY } = useViewportScroll()
const reactState = useMotionAsState(scrollY)
return {reactState}
}
```
#### API
`const state = useMotionAsState(value)`
- `state`: React state
- `value`: Motion value
### [`useStateAsMotion`](docs/useStateAsMotion.md)
Returns a MotionValue value that updates when the React state changes
```jsx
const MyComponent = () => {
const [opacity, setOpacity] = useState(0)
const motionOpacity = useStateAsMotion(opacity)
return
}
```
#### API
`const value = useStateAsMotion(state)`
- `value`: Motion value
- `state`: React state