https://github.com/sarmad426/react-framer-motion

Framer Motion animations with React. Framer motion is a react library for animations
https://github.com/sarmad426/react-framer-motion

framer-motion react typescript

Last synced: 5 days ago
JSON representation

Framer Motion animations with React. Framer motion is a react library for animations

• Host: GitHub
• URL: https://github.com/sarmad426/react-framer-motion
• Owner: Sarmad426
• Created: 2024-07-16T13:45:16.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-27T04:45:00.000Z (3 months ago)
• Last Synced: 2024-08-27T20:59:07.041Z (3 months ago)
• Topics: framer-motion, react, typescript
• Language: TypeScript
• Homepage:
• Size: 2.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Framer Motion

Framer Motion is a powerful animation library for React that allows developers to create smooth and complex animations with minimal effort. It provides an intuitive API for animating components and handles complex scenarios like gestures, drag and drop, and scroll-linked animations. Whether you're building simple transitions or intricate interactions, Framer Motion makes it easy to add a professional touch to your React applications.

## Installation

To get started with Framer Motion, you can install it via npm or yarn:

### Using npm

```bash

npm install framer-motion

```

## Basic Usage

Framer Motion simplifies the process of animating React components. Below are a couple of examples demonstrating its usage.

### Example 1: Simple Fade-In Animation

The following example shows how to create a simple fade-in effect when a component enters the viewport:

```typescript

import React from 'react';

import { motion } from 'framer-motion';

const FadeInComponent: React.FC = () => {

  return (

    

      
Hello, World!

    

  );

};


export default FadeInComponent;

```

### Example 2: Spring Animation with Drag

This example demonstrates a spring animation combined with drag functionality, allowing the user to drag the component across the screen:

```typescript

import React from 'react';

import { motion } from 'framer-motion';

const DraggableComponent: React.FC = () => {

  return (

    

      Drag me!

    

  );

};

export default DraggableComponent;

```

[Framer Motion documentation](https://www.framer.com/motion/).