Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve LayoutGroup Documentation (Clarify vs. motion.div layout) #2958

Open
anishwij opened this issue Dec 25, 2024 · 0 comments
Open

Improve LayoutGroup Documentation (Clarify vs. motion.div layout) #2958

anishwij opened this issue Dec 25, 2024 · 0 comments
Labels
feature New feature or request

Comments

@anishwij
Copy link

Is your feature request related to a problem? Please describe.

Currently, both motion.div with the layout prop and LayoutGroup use the word “layout,” but they perform very different tasks. This can confuse developers who assume LayoutGroup is merely a wrapper for local layout animations. In reality, LayoutGroup provides context that enables shared or coordinated layout animations among multiple components.

Naming: “LayoutGroup” can be interpreted as analogous to motion.div layout, but it actually serves a “provider” role.

Documentation: The official docs don’t provide an immediately clear, side-by-side comparison explaining when you’d use a single motion.div layout versus when you’d need a LayoutGroup.

Describe the solution you'd like

  1. Rename or Add Clarifying Copy. Consider renaming LayoutGroup (e.g., LayoutProvider) in a future major release.
    At the very least, add a prominent note or section at the top of the docs to clarify that it is used for cross-component layout coordination, not local layout animations.
    Side-by-Side Examples

  2. Side-by-Side Examples Show how a single motion.div layout animates layout changes in a single component or DOM subtree.
    Demonstrate how wrapping multiple components in LayoutGroup allows them to coordinate layout changes—like in an accordion, shared layout transitions, etc.

// Local layout animations
const Card = () => (
  <motion.div layout>
    <Content />
  </motion.div>
)

// Cross-component coordination
const App = () => (
  <LayoutGroup>
    <Nav>
      <MenuItem />
    </Nav>
    <Main>
      <Content />
    </Main>
  </LayoutGroup>
)

Describe alternatives you've considered
...

Additional context

I’ve spent significant time experimenting to figure out how best to coordinate layouts across components. After understanding it, I realized the official docs provide minimal explanation for exactly when or why to reach for LayoutGroup vs. motion.div layout. Having this spelled out in the docs will spare other devs from trial-and-error.

@anishwij anishwij added the feature New feature or request label Dec 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant