Framer Motion Sticky Scroll Section Layout

Problem

When building scroll-driven sections with CSS position: sticky and Framer Motion animated slides (absolute-positioned children that fade in/out based on scroll progress), the children render incorrectly — often stacking, overflowing, or appearing at wrong positions. Framer Motion logs: "Please ensure that the container has a non-static position."

Context / Trigger Conditions

• Building a scroll-pinned section with multiple "slides" that transition as user scrolls
• Using position: sticky with a tall scroll runway (e.g., height: 300vh)
• Child slides use position: absolute; inset: 0 to stack on top of each other
• Framer Motion animate toggles opacity and y based on useScroll + useTransform
• Console warning about non-static position on the container

Solution