Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sohanemon/motion
Framer Motion Helper
https://github.com/sohanemon/motion
animation framer framer-motion motion node-module npm
Last synced: 17 days ago
JSON representation
Framer Motion Helper
- Host: GitHub
- URL: https://github.com/sohanemon/motion
- Owner: sohanemon
- Created: 2022-04-08T13:59:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-05T16:22:24.000Z (about 1 year ago)
- Last Synced: 2024-10-17T14:26:41.689Z (about 1 month ago)
- Topics: animation, framer, framer-motion, motion, node-module, npm
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@sohanemon/motion
- Size: 303 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @sohanemon/motion - Declarative Framer Motion Helper
A delightful package for [Framer Motion](https://www.framer.com/motion/) animations. 🌟
## 🚀 Installation
Get started quickly by installing this package:
```bash
npm install @sohanemon/motion
```
or using yarn:
```bash
yarn add @sohanemon/motion
```
## 📖 Usage
### Basic Animation
Animate any component with a simple `animate` prop:
```jsx
import Motion from '@sohanemon/motion';
Your Content Here;
```
### Variants
Define and use animation variants easily:
```jsx
import Motion from '@sohanemon/motion';
// Define your variants
const customVariants = {
custom: { scale: 1.2, rotate: 360 },
};
// Use the variant in your component
Your Content Here
;
```
### Scroll Animation
Create scroll-triggered animations effortlessly:
```jsx
import Motion, { useScrollTransform } from '@sohanemon/motion';
// Create a scroll-triggered animation
const AnimatedComponent = () => {
const scrollY = useScrollTransform({
outputRange: [0, 100],
});
return (
Scroll down to see the animation
);
};
```
### Default Variant
Some default variants are added for simplicity.
```tsx
export const defaultVariants: Variants = {
left: { x: -300, opacity: 0 },
right: { x: 300, opacity: 0 },
top: { y: -300, opacity: 0 },
bottom: { y: 100, opacity: 0 },
hidden: { opacity: 0 },
visible: { x: 0, y: 0, opacity: 1, scale: 1 },
scale1: { opacity: 1, scale: 1 },
scale0: { opacity: 0, scale: 0.1 },
height0: { height: 0 },
height1: { height: '100%' },
};
```
```jsx
import Motion from '@sohanemon/motion';
Your Content Here;
```
> `whileInView` will be auto triggered. More than Simple.
## 🎨 Features
- **SSR**: Works with [Next.js](https://github.com/vercel/next.js) server components.
- **Scroll Animation**: Craft scroll-triggered animations effortlessly.
- **Custom Hook**: Additional custom hooks.
- **Full Framer Motion**: All [Framer Motion](https://github.com/framer/motion) properties are available (re-exported).
- **Variants**: Easily define and apply animation variants.
## 📚 Documentation
For comprehensive usage instructions and more examples, visit the [documentation](https://github.com/sohanemon/motion#readme).
## 🙌 Contributions
We welcome contributions! Feel free to open issues and pull requests on [GitHub](https://github.com/sohanemon/motion).
## 📄 License
This package is released under the [ISC License](https://github.com/sohanemon/motion/blob/main/LICENSE).
## 🚀 Connect with Us
- [GitHub Repository](https://github.com/sohanemon/motion)
- [Report Issues](https://github.com/sohanemon/motion/issues)
Let's bring your web animations to life together! 🌟🚀
---
Crafted with ❤️ by [@sohanemon](https://github.com/sohanemon)
✨ Happy Animating! ✨