https://github.com/masculinn/motion-provider
Animate everything in your react web app, code in 1 minute, test in 5 second, make the web better. Introducing, Motion Provider.
https://github.com/masculinn/motion-provider
framer-motion mit-license motion nextjs open-source react tailwindcss typescript
Last synced: over 1 year ago
JSON representation
Animate everything in your react web app, code in 1 minute, test in 5 second, make the web better. Introducing, Motion Provider.
- Host: GitHub
- URL: https://github.com/masculinn/motion-provider
- Owner: Masculinn
- Created: 2025-02-12T01:01:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-04T20:11:21.000Z (over 1 year ago)
- Last Synced: 2025-04-04T21:24:58.711Z (over 1 year ago)
- Topics: framer-motion, mit-license, motion, nextjs, open-source, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://burakdev.com/motion-provider
- Size: 21.5 MB
- Stars: 25
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Motion Provider
Dear Fellow Developer,
Thank you for being here and taking the time to explore this project. If you are roaming the industry, you will hear my name often in some social apps, linkedin, x, dev.to, daily.dev etc. Follow me via socials🌟. Over the past month, I’ve poured 160+ hours of passion into crafting this project, aiming to give you everything you need to bring your creative visions to life—without compromises. Do not forget everything free-to-use, open-sourced for the developer who has real passion to make the web better!
With this, you can build:
-🚀 Stunning SaaS platforms,
-🎯 Pixel-perfect landing pages,
-💼 Portfolios that captivate clients
...and truly, anything you imagine. No need to google for animations, No need to copy paste entire complicated components that you feel extremely confused instead here you are simply going through the engines, If you do not have idea about the animations you want to generate kindly press 'roll a dice' button and let the engines generates you fully unique animations among 21,840 animation combination.
Special thanks to Motion team (old name: framer-motion) for being a held on the back side by publishing their animation API's open-sourced to the people ❤️
## Introduction
_I know animations are challenging to implement as well as finding the right library to suit your needs, creating animations for different elements and components, and managing them consistently across your application can be time-consuming and require significant effort and patience._
This is where and useAnimationMixer() comes in. It’s a highly customizable, using a tiny (0.6kb) hook from motion and lightning-fast React component built to simplify the process of adding sophisticated animations. Leveraging the Motion library, it provides developers with a declarative approach to animate child elements based on their visibility in the viewport. With pre-defined animation modes and transition configurations, it eliminates the repetitive work of manually creating animations for every element, streamlining the process while delivering polished results.
Motion Provider is a React animation library that simplifies complex motion design through a centralized animation system (CAS). It provides:
- **Atomic Animation Components**: Pre-built motion primitives (`MotionContainer`, `MotionQueue`, `MotionText`)
- **Synchronized Animations**: Coordinate animations across multiple components
- **Dynamic Control**: Real-time animation control with hooks (`useAnimation`)
- **Cross-Platform**: Works with Next.js, React Native, and WebGL
Key differentiators:
- 🌀 Built-in animation queue system
- 🎮 Imperative animation control
- 🌓 Automatic dark mode support
- 📱 Mobile-first responsive animations
## 2. Features
| Feature | Description |
| ------------------------------ | ---------------------------------------------------------------------- |
| Motion Queue System | Sequential/parallel animations with linear/exponential delay logic |
| CAS (Central Animation System) | Centralized control for application-wide animation states |
| Animation Presets | 40+ pre-built animations (fadeIn, rotateClockwise, filterBlurIn, etc.) |
| Responsive Hooks | useAnimation, useMotionState, useBreakpoint for dynamic control |
| TypeSafe API | Full TypeScript support with strict animation type checking |
| Performance Optimized | WebGL fallbacks and requestAnimationFrame integration |
### 3. Documentation & Examples
Motion Provider comes with comprehensive documentation to help you get the most out of its features. Explore the following resources:
- **Component API Reference**
Detailed information about each component and hook.
- **Tutorials & Guides**
Step-by-step guides for implementing complex animations.
- **Examples**
Check out real-world examples demonstrating various use cases:
- **SaaS SPA App:** Learn motion state management and advanced image animations.
- **Crypto Landing App:** Implement coloured and controlled animations.
- **Agency Landing App:** Master text animations and synchronized effects.
- **NFT Landing App:** Explore layout animations and dynamic motion queues.
## Contact
For support and inquiries:
Email: hello@burakdev.com