Framer Motion : Animation & Gesture Library for React


Framer Motion

Framer Motion is a new open source, production-ready motion library for React on the web.Design fluid animations for the web, across desktop and mobile.

Motion is an open source, production-ready library that’s designed for all creative developers.

It looks like this:

<motion.div animate={{ x: 0 }} />

And does this:

  • Spring physics
  • Keyframes
  • Drag
  • SVG paths
  • Server-side rendering
  • Pose-inspired tree animations
  • CSS variables
  • Position transitions
  • Unmount transitions

Features

Animations

When any value in animate changes, the component will automatically animate to the updated target. The default snappy animation is fully configurable via the transition prop.

Variants

Variants are a declarative way to orchestrate complex animations throughout a component tree. By providing multiple components with a variants object with visual states of the same name, they can all be animated in sync by the switch of a single animate prop.

Gestures

Motion extends the basic set of event listeners provided by React with simple yet powerful gesture recognizers. It also provides two helper props, whileHover and whileTap, which define what states to animate to while a gesture is active.

Drag

Making a motion component draggable is as simple as setting its drag prop to true. Dragging behaviour is fully configurable with axis-locking, elastic drag constraints, and gesture-ending transitions.

Scroll

Scroll animations can be driven with the convenient useViewportScroll hook. It returns four Motion Values that update when the viewport scrolls for effects like parallax, or scroll progress indicators.

Paths

motion.path components expose three powerful SVG path properties: pathLengthpathSpacing and pathOffset. These are all set as a value between 0 and 1, without any manual path measurement required.

Framer Motion’s feature set is built off of the software that it is being touted as a successor to, the Pose and Pop motion libraries. This includes various aspects of creating animations, such as utilizing Pop motion’s tween, spring, and inertia simple animations, to the retention of Pose’s variant support for single props controlling complex animations across largetrees.

For More Plugins Click


Leave a Reply

Your email address will not be published. Required fields are marked *