Framer Motion

Creator

Creator

Seonglae Cho

Created

Created

2021 Sep 22 8:28

Editor

Editor

Seonglae Cho

Edited

Edited

2023 Oct 25 11:48

Refs

Refs

Framer Motion is an open source, production-ready library that's designed for all creative developers. It looks like this: It does all this: Spring animations Simple keyframes syntax Gestures (drag/tap/hover) Layout and shared layout animations SVG paths Exit animations Server-side rendering Variants for orchestrating animations across components CSS variables ...and a whole lot more.

https://www.npmjs.com/package/framer-motion

framer-motion

GitHub - framer/motion: Open source, production-ready animation and gesture library for React

Framer Motion is an open source, production-ready library that's designed for all creative developers. It looks like this: It does all this: Spring animations Simple keyframes syntax Gestures (drag/tap/hover) Layout and shared layout animations SVG paths Exit animations Server-side rendering Variants for orchestrating animations across components CSS variables ...and a whole lot more.

GitHub - framer/motion: Open source, production-ready animation and gesture library for React

https://github.com/framer/motion

GitHub - framer/motion: Open source, production-ready animation and gesture library for React

Magic Motion inside

Inside Framer's Magic Motion

November 22, 2022 A guide on recreating framer's magical layout animations. My favourite part about Framer Motion by far is its magical layout animations-slap on the layout prop to any motion component, and watch as that component seamlessly transitions from one part of the page to the next: When you click on "Hide types", the squares seamlessly move from one position to the next.

Inside Framer's Magic Motion

https://www.nan.fyi/magic-motion

Inside Framer's Magic Motion

Recommendations

/////////////