Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swapno963/framer_motion
https://github.com/swapno963/framer_motion
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/swapno963/framer_motion
- Owner: Swapno963
- Created: 2024-02-26T18:00:36.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-02-26T18:07:49.000Z (10 months ago)
- Last Synced: 2024-02-26T19:26:58.620Z (10 months ago)
- Language: JavaScript
- Homepage: https://framer-motion-silk.vercel.app
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framer Motion: A Powerful Animation Library for React
Looking for a powerful and flexible animation library for React? Look no further than **Framer Motion**.
In this project, you'll find 8 captivating examples:
1. **Animated Red Circle:** Starting with an opacity of 0 and reduced size, watch as it smoothly transitions to full visibility and size over one second.
2. **Blue Square to Circular Marvel:** Witness the transformation of a blue square into a mesmerizing circle using border-radius, rotation, and scale to create a visually stunning effect.
3. **Dynamic Button Delight:** Experience buttons that grow on hover and shrink to half their size when clicked, providing a delightful interactive experience.
4. **ChatGPT Animation:** Inspired by dynamic movements, this animation captivates with its engaging and visually striking appearance.
5. **Transition Magic:** Text gracefully glides in from the left, adding an elegant touch to your UI as if gently pushed into view.
6. **Enchanting Counter Animation:** Experience the magic of incrementing numbers, creating a seamless illusion of movement and enchantment.
7. **Discover More:** Explore two additional animations, each offering its own unique charm and intrigue.
## Resources and Links
- **Live Site:** [Framer Motion Variants](https://framer-motion-silk.vercel.app/variants)
- **Code & Docs:** [GitHub Repository](https://github.com/Swapno963/Framer_Motion)
- **Framer Motion:** [Official Website](https://www.framer.com/motion/)## Getting Started
1. **Clone this repository:**
```sh
git clone https://github.com/Swapno963/Framer_Motion.git
```
2. **Navigate to the cloned project directory:**
```sh
cd rnext
```
3. **Install dependencies:**
```sh
npm i
```
4. **Start the project:**
```sh
npm run dev
```