motion: Does not seem to fully support styled-components?

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

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 😁

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

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.

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

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. 🙏

@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.

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 notifications@github.com 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 https://github.com/framer/motion/issues/194?email_source=notifications&email_token=AB34WKS4SWZSZG73OUSVT3TP7FNPPA5CNFSM4ICWWUS2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G7AC7WQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AB34WKUCTPARYMCCCGPP4QDP7FNPPANCNFSM4ICWWUSQ .

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 😃

@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/

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.

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.

<StyledImage fluid{fluid.childImageSharp.fluid} here you add your framer motion scripts />

that’s all. It works perfectly now.

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>

@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!

@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 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.

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