Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/swapno963/framer_motion


https://github.com/swapno963/framer_motion

Last synced: 26 days ago
JSON representation

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
```