Responsive motion

Motion in Framer is not a garnish; it is the page responding. Responsive motion means the animation changes with the structure — collapsing with the layout, reordering with the content, and staying readable at every size.

Design motion for the breakpoints, not against them. The same interaction should feel composed on a phone and on a desktop, which usually means different motion: shorter distances, simpler paths, faster timing where the screen is small.

Let motion carry meaning. A reveal that matches the section’s arrival, a hover that previews the interaction, a transition that explains a layout change — each is the page explaining itself. Motion without meaning is noise; motion with intent is wayfinding.

Respect the reader’s settings. Reduced motion is not a limitation to work around; it is a preference to honor. The page should remain clear and complete when the motion is turned down to a whisper.