Does not seem to fully support styled-components? #194

rchrdnsh · 2019-07-13T04:52:06Z

I want to do this, passing the gatsby-image component `Img into a styled component, while animating it, like so:

const AnimatedImage = styled(motion(Img))`
  width: 200px;
  height: auto;
`

but this does not seem to work, giving me this error:

TypeError: Object(...) is not a function
Module.<anonymous>
src/pages/index.js:81
  78 |   }
  79 | `
  80 | 
> 81 | const LaxImg = styled(motion(Img))`
  82 |   width: 200px;
  83 |   height: auto;
  84 | `

it seems to work with regular html tags, just not react components, which is no bueno for me :-(

Am i doing something wrong? Is something like this not supported? It really needs to be supported, so hopefully I am doing something wrong or it's on the way.

The text was updated successfully, but these errors were encountered:

mattgperry · 2019-07-13T06:24:09Z

I don’t believe this is documented as an oversight but you can do motion.custom(Img) and make sure you pass the ref prop from Img to the underlying motion.div or whatever.

…

On Sat, 13 Jul 2019 at 05:52, rchrdnsh ***@***.***> wrote: I want to do this, passing the gatsby-image component `Img into a styled component, while animating it, like so: const AnimatedImage = styled(motion(Img))` width: 200px; height: auto;` but this does not seem to work, giving me this error: TypeError: Object(...) is not a function Module.<anonymous> src/pages/index.js:81 78 | } 79 | ` 80 | > 81 | const LaxImg = styled(motion(Img))` 82 | width: 200px; 83 | height: auto; 84 | ` it seems to work with regular html tags, just not react components, which is no bueno for me :-( Am i doing something wrong? Is something like this not supported? It really needs to be supported, so hopefully I am doing something wrong or it's on the way. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#194?email_source=notifications&email_token=AB34WKS4SWZSZG73OUSVT3TP7FNPPA5CNFSM4ICWWUS2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7AC7WQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AB34WKUCTPARYMCCCGPP4QDP7FNPPANCNFSM4ICWWUSQ> .

rchrdnsh · 2019-07-13T17:05:27Z

make sure you pass the ref prop from Img to the
underlying motion.div or whatever

hmmmmm...i don't quite follow...is there any documentation on this? Why would there be an underlying div? I would prefer just animating the image directly.

In react-spring I can simply do the following:

const AnimatedReactComponent = styled(animated(ReactComponent))`
  ...styles...
`

and then simply use that element in my JSX, which is exactly what I want to be able to do.

So I don't quite follow what you are saying in regards to using a ref in this case, although I do have a basic understanding of refs and useRef from the hooks documentation.

Is there any documentation on how to do this, or an example floating around somewhere?

rchrdnsh · 2019-07-13T17:11:18Z

just to be clear, this works fine in framer-motion:

const MotionDiv = styled(animated.div)`
  ...styles...
`

...without seemingly any issues, just not this:

const AnimatedReactComponent = styled(animated(ReactComponent))`
  ...styles...
`

...which would be lovely if it did 😁

mattgperry · 2019-07-22T09:56:20Z

Here's an example of Styled Components working with motion.custom: https://codesandbox.io/s/framer-motion-with-styled-components-custom-components-i1wgk

mattgperry · 2019-07-22T10:02:29Z

Had a little bug - closing again!

ooloth · 2019-07-26T22:16:15Z

Awesome library. 🙌

For this particular issue, it would be great if this could work automatically (without the intermediate forwardRef step) since styled-components / emotion are so popular. 🙏

jacobgranberry · 2019-08-07T16:58:13Z

Here's an example of Styled Components working with motion.custom: https://codesandbox.io/s/framer-motion-with-styled-components-custom-components-i1wgk

I think I'm missing something - I don't see any instance in this example of either a component made with styled components or a component using motion.custom

tpiersall · 2019-08-08T21:48:02Z

Here's an example of Styled Components working with motion.custom: https://codesandbox.io/s/framer-motion-with-styled-components-custom-components-i1wgk

I think I'm missing something - I don't see any instance in this example of either a component made with styled components or a component using motion.custom

Ya I can't see that either in the mentioned example

joebourne · 2019-08-30T10:03:02Z

@jacobgranberry @tpiersall This seems to show it a bit better: https://codesandbox.io/s/framer-motion-simple-animation-o32p0

sbarry50 · 2020-01-12T20:40:31Z

Stumbled upon this... Doesn't look like a clear cut answer was posted. But I was able to get this to work. Think this is what @InventingWithMonster meant.

const AnimatedLink = styled(motion.custom(Link))`
    color: red;
`

styled(motion(Link)) threw the same error @rchrdnsh was getting.

samajammin · 2020-02-08T21:31:49Z

Thanks example @sbarry50 - I'm trying the same approach:

const Logo = styled(motion.custom(Img))`
   ...styles...
`

But getting caught up on passing the ref prop (or the forwardRef step @ooloth mentioned?). I'm seeing this error:

Error: No `ref` found. Ensure components created with `motion.custom` forward refs using `React.forwardRef`

Could someone please explain how that's accomplished? Thanks!

sbarry50 · 2020-02-09T14:42:41Z

@samajammin it's pretty simple assuming Img is a component you can edit. Just follow the docs.

If you're trying to animate someone else's component and can't edit it like Gatsby's image component you can try wrapping it in a custom component and forwarding refs to that. Not 100% sure that would work (haven't tested it) but thats where I would start.

sbarry50 · 2020-02-11T05:23:09Z

@samajammin Following up... not sure if the Img you're using there is a gatsby-image component but I just ran into this very issue with a Gatsby image and forwarding refs as shown in the React docs is not working for me either.

Seems like it could be related to this issue.

samajammin · 2020-02-11T05:27:53Z

@sbarry50 yup, it was a gatsby-image component. I found a way around my problem but I couldn't find a way to accomplish this either. I'll update here if I do!

sbarry50 · 2020-02-11T05:41:16Z

@samajammin Cool, I just got mine working too. I just wrapped the image in a div and animated that instead. Annoying but only way I've figured out so far.

migsan · 2020-02-13T23:06:04Z

I still quite don't understand how to Motion a Styled component. Does anyone have some examples?
I remember with Posed it was quite easy and you could style and then add pose on top of it for transitions. How is that achieved now with Framer?
Thanks in advance.

designbyadrian · 2020-02-26T17:47:53Z

@migsan What most of us had to do was to not try to multi-wrap the components:

const AnimatedImage = styled(motion.div)`
  img {
    width: 100%;
  }
`;

const variants = {} // ... etc

<AnimatedImage variants={variants}>
  <Img />
</AnimatedImage>

This depends on what kind of transformation you wish to do to the image, of course.

mattgperry · 2020-03-03T08:39:10Z

@migsan For reference: A guide on how to use Framer Motion with Styled Components

https://inventingwithmonster.io/20200302-can-i-use-framer-motion-with-styled-components/

reduxdj · 2020-04-11T19:31:43Z

I am baffled with this issue, while simple animations work, complex components do not, here's my on component...

import React, { useRef, useEffect } from 'react';
import styled from 'styled-components';
import { motion as Motion, useCycle } from 'framer-motion';
// Naive implementation - in reality would want to attach
// a window or resize listener. Also use state/layoutEffect instead of ref/effect
// if this is important to know on initial client render.
// It would be safer to  return null for unmeasured states.
export const useDimensions = ref => {
  const dimensions = useRef({ width: 0, height: 0 });

  useEffect(() => {
    dimensions.current.width = ref.current.offsetWidth;
    dimensions.current.height = ref.current.offsetHeight;
  }, [ref]);

  return dimensions.current;
};

const Path = props => <Motion.path fill="transparent" strokeWidth="3" stroke="hsl(0, 0%, 18%)" strokeLinecap="round" {...props} />;

const MENU_ITEM_VARIANTS = {
  open: {
    y: 0,
    opacity: 1,
    transition: {
      y: { stiffness: 1000, velocity: -100 },
    },
  },
  closed: {
    y: 50,
    opacity: 0,
    transition: {
      y: { stiffness: 1000 },
    },
  },
};

const colors = ['#FF008C', '#D309E1', '#9C1AFF', '#7700FF', '#4400FF'];

export const MenuItem = ({ i, children }) => {
  const style = { border: `2px solid ${colors[i]}` };
  return (
    <Motion.div variants={MENU_ITEM_VARIANTS}>
      <div className="icon-placeholder" style={style} />
      {children}
    </Motion.div>
  );
};

const ACCORDION_VARIANTS = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

export const AccordionPanel = ({ children }) => (
  <Motion.div variants={ACCORDION_VARIANTS}>
    {React.Children.toArray(children).map((item, i) => (
      <MenuItem i={i} key={i}>
        {item}
      </MenuItem>
    ))}
  </Motion.div>
);

const sidebar = {
  open: (height = 1000) => ({
    clipPath: `circle(${height * 2 + 200}px at 40px 40px)`,
    transition: {
      type: 'spring',
      stiffness: 20,
      restDelta: 2,
    },
  }),
  closed: {
    clipPath: 'circle(30px at 40px 40px)',
    transition: {
      delay: 0.5,
      type: 'spring',
      stiffness: 400,
      damping: 40,
    },
  },
};

export const MenuToggle = styled(({ className, toggle }) => (
  <button className={className} onClick={toggle}>
    <svg width="23" height="23" viewBox="0 0 23 23">
      <Path
        variants={{
          closed: { d: 'M 2 2.5 L 20 2.5' },
          open: { d: 'M 3 16.5 L 17 2.5' },
        }}
      />
      <Path
        d="M 2 9.423 L 20 9.423"
        variants={{
          closed: { opacity: 1 },
          open: { opacity: 0 },
        }}
        transition={{ duration: 0.1 }}
      />
      <Path
        variants={{
          closed: { d: 'M 2 16.346 L 20 16.346' },
          open: { d: 'M 3 2.5 L 17 16.346' },
        }}
      />
    </svg>
  </button>
))`
  background: red;
`;

const variants = {
  open: {
    transition: { staggerChildren: 0.07, delayChildren: 0.2 },
  },
  closed: {
    transition: { staggerChildren: 0.05, staggerDirection: -1 },
  },
};

export const Navigation = () => (
  <Motion.div variants={variants}>
    {[0, 1, 2, 3, 4].map(i => (
      <MenuItem i={i} key={i} />
    ))}
  </Motion.div>
);

export const Accordion = ({ children, className }) => {
  const [isOpen, toggleOpen] = useCycle(false, true);
  const containerRef = useRef(null);
  const { height } = useDimensions(containerRef);
  return (
    <Motion.div className={className} initial={false} animate={isOpen ? 'open' : 'closed'} custom={height} ref={containerRef}>
      <Motion.div className="background" variants={sidebar} />
      <MenuToggle toggle={() => toggleOpen()} />
      <AccordionPanel children={children} />
    </Motion.div>
  );
};

If I remove the accordionPanel component my menu toggle has a background, if I add it back, the Toggle loses it's style. I'm completely baffled.

Usage:

<Accordion>
<SomeThing />
</Accordion>

Snikerso · 2020-06-09T19:59:12Z

It working !

import React from 'react';
import { ReactComponent as PuzzlesSVG } from 'assets/puzzle.svg';
import styled from 'styled-components';
import { motion } from 'framer-motion'

const PuzzlesStyle = styled(motion.custom(PuzzlesSVG))`

.a{

}

`;

const Puzzles = () => {

return (
    <PuzzlesStyle
        initial={{ x:0}}
        animate={{ x:20 }}
        transition={{ duration: 3, loop: Infinity }}
        whileHover={{ scale: 1.1 }} />
)

}
export default Puzzles

RectoVersoDev · 2020-07-08T08:38:17Z

Hello, I can't get this working with gatsby Link component :(

I'm getting this error :

TypeError: can't access property "custom", framer_motion__WEBPACK_IMPORTED_MODULE_2__.default is undefined

I tried these syntaxes:

const Button = styled(motion.custom(Link))`
    color: red;
`

&

const Button = motion.custom(styled.Link`
    color: red;
`);

Someone have any tips?

Jojocaster · 2020-10-30T00:14:11Z

Hello, I can't get this working with gatsby Link component :(

I'm getting this error :

TypeError: can't access property "custom", framer_motion__WEBPACK_IMPORTED_MODULE_2__.default is undefined

I tried these syntaxes:
const Button = styled(motion.custom(Link))`
    color: red;
`
&
const Button = motion.custom(styled.Link`
    color: red;
`);
Someone have any tips?

I'm afraid Link isn't a styled-component - it's an actual React component, just wrap it inside your own styled-component :)

unbeatendev · 2020-12-28T14:37:28Z

Okay I just figured this it now. You can use this instead.

Const styledImage = styled(motion.custom(props => <Img {...props}/>))

then add your styles.

once you are then then you can do this.

that’s all. It works perfectly now.

unbeatendev · 2020-12-28T14:38:22Z

Hello, I can't get this working with gatsby Link component :(
I'm getting this error :
TypeError: can't access property "custom", framer_motion__WEBPACK_IMPORTED_MODULE_2__.default is undefined
I tried these syntaxes:
const Button = styled(motion.custom(Link))`
    color: red;
`
&
const Button = motion.custom(styled.Link`
    color: red;
`);
Someone have any tips?
I'm afraid Link isn't a styled-component - it's an actual React component, just wrap it inside your own styled-component :)

I provided a solution to this. You can pass your Link props instead. It will work.

RectoVersoDev · 2021-01-07T10:08:44Z

@OginniSamuel Thanks for this but it's not working with the Gatsby Link component :(

I get a critical error: "React does not recognize the whileHover prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase whilehover instead. If you accidentally passed it from a parent component, remove it from the DOM element."

initial, whileHover and animate props are added in the html and animations don't work

I do this:

const ContactLink = styled(motion.custom(props => <Link {...props} />))`
 ...styles
`

<ContactLink
   to="/contact"
   initial="rest"
   whileHover="hover"
>
   <span>Contact</span>
   <motion.img
     src={loudSpeaker}
     variants={contactLinkVariants}
   />
</ContactLink>

rchrdnsh added the feature New feature or request label Jul 13, 2019

mattgperry closed this as completed Jul 22, 2019

mattgperry reopened this Jul 22, 2019

mattgperry closed this as completed Jul 22, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Does not seem to fully support styled-components? #194

Does not seem to fully support styled-components? #194

rchrdnsh commented Jul 13, 2019

mattgperry commented Jul 13, 2019 via email

rchrdnsh commented Jul 13, 2019

rchrdnsh commented Jul 13, 2019

mattgperry commented Jul 22, 2019

mattgperry commented Jul 22, 2019

ooloth commented Jul 26, 2019

jacobgranberry commented Aug 7, 2019

tpiersall commented Aug 8, 2019 •

edited

joebourne commented Aug 30, 2019

sbarry50 commented Jan 12, 2020

samajammin commented Feb 8, 2020

sbarry50 commented Feb 9, 2020

sbarry50 commented Feb 11, 2020

samajammin commented Feb 11, 2020

sbarry50 commented Feb 11, 2020 •

edited

migsan commented Feb 13, 2020

designbyadrian commented Feb 26, 2020

mattgperry commented Mar 3, 2020

reduxdj commented Apr 11, 2020 •

edited

Snikerso commented Jun 9, 2020

RectoVersoDev commented Jul 8, 2020 •

edited

Jojocaster commented Oct 30, 2020

unbeatendev commented Dec 28, 2020

unbeatendev commented Dec 28, 2020

RectoVersoDev commented Jan 7, 2021 •

edited

Does not seem to fully support styled-components? #194

Does not seem to fully support styled-components? #194

Comments

rchrdnsh commented Jul 13, 2019

mattgperry commented Jul 13, 2019 via email

rchrdnsh commented Jul 13, 2019

rchrdnsh commented Jul 13, 2019

mattgperry commented Jul 22, 2019

mattgperry commented Jul 22, 2019

ooloth commented Jul 26, 2019

jacobgranberry commented Aug 7, 2019

tpiersall commented Aug 8, 2019 • edited

joebourne commented Aug 30, 2019

sbarry50 commented Jan 12, 2020

samajammin commented Feb 8, 2020

sbarry50 commented Feb 9, 2020

sbarry50 commented Feb 11, 2020

samajammin commented Feb 11, 2020

sbarry50 commented Feb 11, 2020 • edited

migsan commented Feb 13, 2020

designbyadrian commented Feb 26, 2020

mattgperry commented Mar 3, 2020

reduxdj commented Apr 11, 2020 • edited

Snikerso commented Jun 9, 2020

RectoVersoDev commented Jul 8, 2020 • edited

Jojocaster commented Oct 30, 2020

unbeatendev commented Dec 28, 2020

unbeatendev commented Dec 28, 2020

RectoVersoDev commented Jan 7, 2021 • edited

tpiersall commented Aug 8, 2019 •

edited

sbarry50 commented Feb 11, 2020 •

edited

reduxdj commented Apr 11, 2020 •

edited

RectoVersoDev commented Jul 8, 2020 •

edited

RectoVersoDev commented Jan 7, 2021 •

edited