Apply motion to react component Framer-Motion

Question

I know that I can apply motion directly to element/HTMLtag like this:

<motion.div>some content</div>

But how can I apply it to this?

<Comp />

Without wrapping it inside another HTML element, like in React-Transition-Group library.

Framer API provides Frame component, but it acts like permanent additional HTML element with own styling, and it is messing my layout.

Accept answer should be @Gabi's https://stackoverflow.com/a/72006520/80428 — Jay Wick, May 30 '22 at 00:58

Andrew · Accepted Answer · 2020-06-28T14:28:40.747

24

If anyone comes to this page seeking for the solution of how to apply motion from Framer-Motion library to your React Component and not the direct DOM element like "div" or "span", here it is:

motion.custom()

Example of use:

import { Link } from "react-router-dom"

const MotionLink = motion.custom(Link)

return <MotionLink />

As for today it is not mentioned in the official documentation, or it is in someplace deep and hard to find.

I had found it in BUG reports here, there is a Codesanbox that illustrates my example, created by the person who reported a bug.

edited Jun 28 '20 at 14:28

answered Jun 25 '20 at 16:10

Andrew

695
1
8
21

very strange! so important feature be so hidden. neverthelsee thanks so mutch for this. – Behnam Esmaili Nov 26 '20 at 17:24
8

this does not work anymore with framer motion version 4.1.3 – Essay97 Apr 14 '21 at 10:59
16

for version 4.1.3 or above use `motion(Link)` – Aleksandr K. Aug 25 '21 at 13:55
The official documentation for [Custom Components](https://www.framer.com/motion/component/#custom-components) – Ryan Jan 20 '23 at 05:05

score 13 · Answer 2 · edited May 30 '22 at 00:58

13

motion.custom was deprecated as of v4.0 in favour of motion(Component) or motion("Component").

Your code would simply look like this

const MotionComp = motion(Comp)

return <MotionComp>some content</MotionComp>

edited May 30 '22 at 00:58

Jay Wick

12,325
10
54
78

answered Apr 25 '22 at 22:54

Gabi

131
1
4

Dennis Vash · Answer 3 · 2021-01-20T21:39:38.127

7

Without using any internal fuctions, You just need to wrap it with any motion element:

<motion.div>
  <Comp />
</motion.div>

You can notice such behavior across examples in the docs, like of Side Menu example.

edited Jan 20 '21 at 21:39

answered Jun 25 '20 at 11:44

Dennis Vash

50,196
9
100
118

You can pass Component through props but that's a bad practice, usually you go for `props.children` or HOC, you can read about it in React docs. – Dennis Vash Jun 25 '20 at 11:55

Apply motion to react component Framer-Motion

3 Answers3