Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Animation with css grid layout is squashing content and not synced properly

See original GitHub issue

Description

I’m trying to build an animatable layout with css grid and framer motion, basically show and hide sidebar with subtle animation.

The issue is with orchestrating animation using layout prop and AnimatedSharedLayout when the animation happens the content container animates later, and squeezes its children elements

I’m not sure if I’m doing something wrong here, but please go ahead and have a look yourself…

https://codesandbox.io/s/framer-motion-css-grid-layout-4x0ug?file=/src/App.tsx

How to reproduce

Go to CodeSandBox
Click on ‘Show Sidebar’
Notice the sidebar and content animation
Notice the ‘Show Sidebar’ button when animating

Expected behaviour

Smooth, clear, synced animation 😃

https://user-images.githubusercontent.com/6163988/108196218-22638280-7119-11eb-8de2-a4c989f35234.mov

Issue Analytics

State:
Created 3 years ago
Comments:6

Top GitHub Comments

1reaction

mattgperrycommented, Feb 17, 2021

You could try adding a wrapper between the motion with layout and the children with a motion.div with layout=“position”?

0reactions

mshaaban0commented, Feb 18, 2021

Thanks for helping 👍

Top Results From Across the Web

CSS Grid Gotchas And Stumbling Blocks - Smashing Magazine

The first layout uses flexbox to display as many boxes as will fit into the available width. Here we are controlling the layout...

Preventing a Grid Blowout | CSS-Tricks

In our simple demo, the <main> element automatically places itself in that first column as it is the first child of the grid....

759665 - [css-grid] Support transitions/animations ... - Monorail

Is there any plans to get it working for grid-template-columns and grid-template-rows as defined in the spec? It seems to work for grid-gap...

CSS Grid Layout and progressive enhancement

Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid...

Changelog - Bricks Builder

Documentation: https://academy.bricksbuilder.io/article/css-grid-layout/. Note: While the grid ... Infinite Scroll: Not working properly on blog/archivesFix ...