Skip to content

Commit

Permalink
feat: migrate framer-motion to motion (#481)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dillionverma
dillionverma authored Dec 31, 2024
1 parent 79295b2 commit 93912ec
Show file tree
Hide file tree
Showing 71 changed files with 179 additions and 207 deletions.
2 changes: 1 addition & 1 deletion components/sidebar-nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import { SidebarNavItem } from "@/types";
import { ExternalLinkIcon } from "@radix-ui/react-icons";
import { motion } from "framer-motion";
import { motion } from "motion/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import posthog from "posthog-js";
Expand Down
12 changes: 6 additions & 6 deletions content/docs/components/fade-text.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ npx shadcn@latest add "https://magicui.design/r/fade-text"

## Props

| Prop | Type | Description | Default |
| ----------- | --------------- | -------------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| direction | string | Can be: "down" , "left", "right", "up" | "up" |
| text | string | Text to animate | "" |
| framerProps | HTMLMotionProps | An object containing framer-motion animation props | {} |
| Prop | Type | Description | Default |
| ----------- | --------------- | --------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| direction | string | Can be: "down" , "left", "right", "up" | "up" |
| text | string | Text to animate | "" |
| motionProps | HTMLMotionProps | An object containing a motion animation props | {} |
14 changes: 7 additions & 7 deletions content/docs/components/flip-text.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ npx shadcn@latest add "https://magicui.design/r/flip-text"

## Props

| Prop | Type | Description | Default |
| ------------- | --------------- | -------------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| duration | number | Duration of the animation | 0.2 |
| delayMultiple | number | Transition delay multiplier. | 0.08 |
| word | string | An array of words to rotate through | "" |
| framerProps | HTMLMotionProps | An object containing framer-motion animation props | {} |
| Prop | Type | Description | Default |
| ------------- | --------------- | --------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| duration | number | Duration of the animation | 0.2 |
| delayMultiple | number | Transition delay multiplier. | 0.08 |
| word | string | An array of words to rotate through | "" |
| motionProps | HTMLMotionProps | An object containing motion animation props | {} |
14 changes: 7 additions & 7 deletions content/docs/components/gradual-spacing.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@ npx shadcn@latest add "https://magicui.design/r/gradual-spacing"

## Props

| Prop | Type | Description | Default |
| ------------- | --------------- | -------------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| duration | number | Duration of the animation | 0.5 |
| delayMultiple | number | Transition delay multiplier. | 0.1 |
| text | string | An array of words to rotate through | "" |
| framerProps | HTMLMotionProps | An object containing framer-motion animation props | {} |
| Prop | Type | Description | Default |
| ------------- | --------------- | --------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| duration | number | Duration of the animation | 0.5 |
| delayMultiple | number | Transition delay multiplier. | 0.1 |
| text | string | An array of words to rotate through | "" |
| motionProps | HTMLMotionProps | An object containing motion animation props | {} |
2 changes: 1 addition & 1 deletion content/docs/components/hyper-text.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ npx shadcn@latest add "https://magicui.design/r/hyper-text"
<Step>Install the following dependencies:</Step>

```bash
npm install framer-motion
npm install motion
```

<Step>Copy and paste the following code into your project.</Step>
Expand Down
2 changes: 1 addition & 1 deletion content/docs/components/scroll-based-velocity.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ npx shadcn@latest add "https://magicui.design/r/scroll-based-velocity"
<Step>Install the following dependencies:</Step>

```bash
npm install framer-motion
npm install motion
```

<Step>Copy and paste the following code into your project.</Step>
Expand Down
12 changes: 6 additions & 6 deletions content/docs/components/word-fade-in.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ npx shadcn@latest add "https://magicui.design/r/word-fade-in"

## Props

| Prop | Type | Description | Default |
| --------- | -------- | -------------------------------------------------- | -------------- |
| className | string | The class name to be applied to the component | |
| delay | number | The Delay between each word animation | 0.15 |
| words | string | A Text that is animated word by word | "word fade in" |
| variants | Variants | An object containing framer-motion animation props | {} |
| Prop | Type | Description | Default |
| --------- | -------- | --------------------------------------------- | -------------- |
| className | string | The class name to be applied to the component | |
| delay | number | The Delay between each word animation | 0.15 |
| words | string | A Text that is animated word by word | "word fade in" |
| variants | Variants | An object containing motion animation props | {} |
14 changes: 7 additions & 7 deletions content/docs/components/word-rotate.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ npx shadcn@latest add "https://magicui.design/r/word-rotate"
<Step>Install the following dependencies:</Step>

```bash
npm install framer-motion
npm install motion
```

<Step>Copy and paste the following code into your project.</Step>
Expand All @@ -48,9 +48,9 @@ npm install framer-motion

## Props

| Prop | Type | Description | Default |
| ----------- | --------------- | -------------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| duration | number | Duration of the animation | 2500 |
| words | string[] | An array of words to rotate through | "" |
| framerProps | HTMLMotionProps | An object containing framer-motion animation props | {} |
| Prop | Type | Description | Default |
| ----------- | --------------- | --------------------------------------------- | ------- |
| className | string | The class name to be applied to the component | |
| duration | number | Duration of the animation | 2500 |
| words | string[] | An array of words to rotate through | "" |
| motionProps | HTMLMotionProps | An object containing motion animation props | {} |
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
"crisp-sdk-web": "^1.0.25",
"critters": "^0.0.24",
"date-fns": "^2.30.0",
"framer-motion": "^11.3.31",
"geist": "^1.2.2",
"gray-matter": "^4.0.3",
"jotai": "^2.10.0",
Expand Down
25 changes: 0 additions & 25 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 93912ec

Please sign in to comment.