Need help implementing Framer Motion layout animations in Plasmic components

Developer Support
1

What are you trying to do?
I’m trying to add smooth animations to my Plasmic components when they change variants or when their layout changes. I’m using Framer Motion for this, which requires a specific setup to work properly:

  1. Framer Motion needs a LayoutGroup component at the parent level to coordinate animations between children
  2. Any component that should animate needs to be wrapped in a motion.div with the layout prop
  3. For animations to work smoothly, both the parent and all children that participate in the animation need to be motion components

For example, in regular React, it would look like this:

<LayoutGroup>
  <motion.div layout>
    <motion.div layout>Child 1</motion.div>
    <motion.div layout>Child 2</motion.div>
  </motion.div>
</LayoutGroup>

The challenge is implementing this structure in Plasmic while preserving all component styles and behaviors.

What have you tried so far?

  1. Created a MotionBehavior component:
const MotionBehavior: React.FC<MotionBehaviorProps> = ({ children }) => {
  return (
    <motion.div 
      {...children.props}
      layout
    >
      {children.props.children}
    </motion.div>
  );
};

Problem: This only wraps the parent in motion.div, but Framer Motion needs all children to be motion components too. When I tried to recursively wrap children, the components lost their Plasmic styles and behaviors.

  1. Tried using root element override through the API explorer:
<PlasmicComponent
  component="Plasmic components"
  componentProps={{
    root: {
      as: motion.div,
      props: {
        layout: true
      }
    }
  }}
/>

Problem: I can’t import motion from “framer-motion” in this file even through its running on my server/project, additionally i couldn’t find how to override the antd components only the plasmic components and my custom components.

The main issues I’m facing:

  1. How to properly structure the LayoutGroup and motion.div hierarchy in Plasmic
  2. How to make sure all components that need to animate are wrapped in motion.div
  3. How to preserve Plasmic styles and behaviors while adding motion capabilities
  4. How to handle this globally so all components can animate when changing variants

Questions:

  1. Is there a recommended way to implement Framer Motion animations in Plasmic?
  2. How can we add motion capabilities to components without breaking their styles?
  3. Is there a way to globally enhance components with motion features?

Any help would be greatly appreciated as I’m stuck trying to make these two great tools (Plasmic and Framer Motion) work together!

Relevant links:

We’ve extensively reviewed these docs trying to find the best approach to implement motion animations while preserving Plasmic’s component system, but haven’t found a clear solution that satisfies both Framer Motion’s requirements and Plasmic’s component structure.

2

Make sure your code components accept className. See Writing code components for use with Plasmic | Learn Plasmic

I thought your component looked a bit funny–I think it should look something like this:

const MotionBehavior: React.FC<MotionBehaviorProps> = ({ className, children }) => {
  return (
    <motion.div layout className={className}>
      {children}
    </motion.div>
  );
};
3

Hi jason, thanks for the response, we tried that however since the original component is having its div replaced by motion div or being wrapped with it (depending on what we’ve tried) it does get styling options with the className, but the original ones from the component get destroyed, some just go to width or height to 0.

i’ve been looking through the Api explorer to maybe override the root element or change the

to motion.div globally but i cant find those components (horizontal stack, freeBox, root, etc) using the component fetcher, also antd components can be found running the component fetch api.

do you have any advice on how i should approach this? if i change it from the root all components will now have the motion.div by default.

Im a bit confused on the api explorer page, that page is only for prototyping right ? it wont let me save he overrides.

Screenshot 2024-12-30 at 17.56.40
Screenshot 2024-12-30 at 17.56.401802×1032 94.5 KB

lastly inside that interface below the “Named Element Prop” i can see the name of my custom component inside the <> for example and in the root element i see the tag instead

so the name of the stack components is root, or div or freeBox, tried all with the fetch but could not find any results.

thanks for the help.

4

Yes, the API explorer is only for prototyping and doesn’t affect your project at all.

OK I think I better understand what you’re trying to do now, and I think you would need to register individual code components for every element that you need. So that means you’ll likely need your own:

  • MotionHorizontalStack
  • MotionVerticalStack
  • MotionText
  • etc

There might be a way to globally substitute tags when rendering, but that would only work outside of Plasmic.