motion

Fixed

• Layout projection improvements.

Fixed

• Disabling hover events when a drag is active.

Fixed

• Animating to/between 0rem and other non-specifically handled unit types.

Fixed

• Clamping borderRadius to 0 and above during crossfade.

Fixed

• Animating from undefined to number (including units) now animates from 0.

Added

• Relative layout animations
• Adding transition.crossfade and transition.layout for crossfade and layout-specific transitions.

Fixed

• Various layout projection improvements.

Fixed

• Adding package.json to exports so it can be imported by Node.

Added

• Added the new LazyMotion component to defer the loading of animations and gestures.

Removed

• The deprecated motion.custom(). Use motion() instead.

Added

• Exporting useVariantContext for internal Framer use.

Added

• Support for hex alpha, ie #FFF0 and #FFFFFF00.
• Support for default filter values. For example, when animating from brightness(50%), the animation will start from brightness(100%)rather thanbrightness(0%).

Fixed

• snapToCursor respects drag axis.

Updated

• Updated dependencies.

Added

• whileFocus

Fixed

• Error when mixing initial={false} and animate={controls}.

Added

• whileDrag
• Adding Safari-prefixed userSelect css to draggable elements.
• whileHover, whileTap and exit all now accept variant lists.

Changed

• New behaviour for when values are removed from animation props (animate, whileHover, exit etc). The value will be searched for in active props of a lower priority running (style <- animate <- whileHover <- whileTap <- whileDrag <- exit). This may introduce subtle behavioural changes, hence the major.

Removed

• The deprecated useInvertedScale hook. Use the layout prop instead.
• The deprecated yoyo, flip and loop options. Use repeat and repeatType options instead.

Fixed

• Correctly applying transform on SVG elements.
• Lazy-initialising viewport scroll, VisualElement.axisProgress, and reduced motion MotionValues, for increased startup performance.
• Improved measurement scheduling for drag components and nested AnimateSharedLayout trees.
• Robust calculation of treeScale.

Added

• layout prop for automatic layout animations.
• AnimateSharedLayout and layoutId for shared layout animations.
• onMeasureDragConstraints prop that fires when dragConstraints are measured.
• useIsPresent, a read-only version of usePresence.
• Allow dragConstraints to be a ref that is smaller than the draggable element.

Removed

• positionTransition and layoutTransition props (use layout={true} instead).
• Point type in favour of Point2D.
• useAnimatedState: Moved to Framer library.
• dragOriginX, dragOriginY props.
• stylefire as a dependency.

Fixed

• Removing a MotionValue from style now correctly unsets it from the element.

Changed

• Using Proxy to generate motion components. This saves ~0.5kb from the bundle size and ensures compatibility with all DOM elements and Web Components.
• x and y transform values won't change as a result of a drag gesture as this now works via layout projection.
• Drag events now report point as the pointer relative to the viewport, in line with other pointer events.
• Changed build process and using Terser for uglification. Reduces bundle size by ~1.2kb. (@stokesman in #596)

Fixed

• positionTransition on exiting components within AnimatePresence.

Fixed

• Pan and drag gestures with PointerEvent.

Added

• AnimatePresence.exitBeforeEnter.
• Added explicit support for custom components as children of AnimatePresence.

Fixed

• Fixing issue with drag constraints (ref-based) being reset, while dragging, on unrelated parent component updates.
• Updated rollup config to list tslib as an external dependency.
• Ensuring unmounting components don't call onAnimationComplete.
• Adding error message when no initial value is set, or can be read or inferred.
• Ensuring color alpha is always within bounds.
• Ensuring variants propagate on unmount.

Upgrade

• Typescript to 3.5.

Fixed

• Removing re-entering children from exiting list in AnimatePresence.